@hauktui/registry 0.0.1

package/components/pagination/pagination.tsx

@@ -0,0 +1,158 @@
+import React, { 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 PaginationProps {
+  /** Current page (1-indexed) */
+  page: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Callback when page changes */
+  onChange: (page: number) => void;
+  /** Whether the pagination is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Number of page buttons to show */
+  siblingCount?: number;
+  /** Show first/last buttons */
+  showBoundaryButtons?: boolean;
+}
+
+export function Pagination({
+  page,
+  totalPages,
+  onChange,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  siblingCount = 1,
+  showBoundaryButtons = true,
+}: PaginationProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("pagination");
+  const { isFocused } = useFocusable(id);
+
+  const goToPage = useCallback(
+    (newPage: number) => {
+      const clampedPage = clamp(newPage, 1, totalPages);
+      if (clampedPage !== page) {
+        onChange(clampedPage);
+      }
+    },
+    [page, totalPages, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.leftArrow || input === "h") {
+        goToPage(page - 1);
+      } else if (key.rightArrow || input === "l") {
+        goToPage(page + 1);
+      } else if (input === "g" && !key.shift) {
+        goToPage(1);
+      } else if (input === "G") {
+        goToPage(totalPages);
+      } else {
+        const num = parseInt(input, 10);
+        if (num >= 1 && num <= 9 && num <= totalPages) {
+          goToPage(num);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Calculate visible page numbers
+  const getPageNumbers = (): (number | "...")[] => {
+    const pages: (number | "...")[] = [];
+
+    const leftSibling = Math.max(page - siblingCount, 1);
+    const rightSibling = Math.min(page + siblingCount, totalPages);
+
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < totalPages - 1;
+
+    if (showBoundaryButtons && leftSibling > 1) {
+      pages.push(1);
+      if (showLeftEllipsis) pages.push("...");
+    }
+
+    for (let i = leftSibling; i <= rightSibling; i++) {
+      pages.push(i);
+    }
+
+    if (showBoundaryButtons && rightSibling < totalPages) {
+      if (showRightEllipsis) pages.push("...");
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return React.createElement(
+    Box,
+    {
+      gap: 1,
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+    },
+    // Previous button
+    React.createElement(
+      Text,
+      {
+        color: page > 1 ? tokens.colors.accent : tokens.colors.disabled,
+        dimColor: page <= 1,
+      },
+      "←"
+    ),
+    // Page numbers
+    ...pageNumbers.map((pageNum, index) => {
+      if (pageNum === "...") {
+        return React.createElement(
+          Text,
+          { key: `ellipsis-${index}`, color: tokens.colors.muted },
+          "..."
+        );
+      }
+
+      const isCurrent = pageNum === page;
+      return React.createElement(
+        Text,
+        {
+          key: pageNum,
+          color: isCurrent ? tokens.colors.accent : tokens.colors.fg,
+          bold: isCurrent,
+          inverse: isCurrent && isFocused,
+        },
+        String(pageNum)
+      );
+    }),
+    // Next button
+    React.createElement(
+      Text,
+      {
+        color:
+          page < totalPages ? tokens.colors.accent : tokens.colors.disabled,
+        dimColor: page >= totalPages,
+      },
+      "→"
+    ),
+    // Page indicator
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted, dimColor: true },
+      `(${page}/${totalPages})`
+    )
+  );
+}

package/components/password-input/index.ts

@@ -0,0 +1,2 @@
+export { PasswordInput } from "./password-input.js";
+export type { PasswordInputProps } from "./password-input.js";

package/components/password-input/password-input.tsx

@@ -0,0 +1,198 @@
+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 PasswordInputProps {
+  /** 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 (default: "*") */
+  mask?: string;
+  /** Show password reveal hint */
+  showHint?: boolean;
+}
+
+export function PasswordInput({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  placeholder = "Enter password",
+  label,
+  disabled = false,
+  maxLength,
+  tokens: propTokens,
+  focusId,
+  mask = "*",
+  showHint = true,
+}: PasswordInputProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("password-input");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [cursorPosition, setCursorPosition] = useState(defaultValue.length);
+  const [showPassword, setShowPassword] = useState(false);
+
+  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;
+      }
+
+      // Toggle password visibility with Ctrl+R
+      if (key.ctrl && input === "r") {
+        setShowPassword((prev) => !prev);
+        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 or plain)
+  const displayValue = showPassword
+    ? currentValue
+    : mask.repeat(currentValue.length);
+
+  // 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,
+      },
+      React.createElement(Text, { color: tokens.colors.muted }, showPassword ? "* " : "  "),
+      renderValue()
+    ),
+    showHint && isFocused
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "Ctrl+R to ",
+          showPassword ? "hide" : "reveal"
+        )
+      : null
+  );
+}

package/components/popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from "./popover.js";
+export type { PopoverProps } from "./popover.js";

package/components/popover/popover.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable } from "@hauktui/primitives-ink";
+import { stableId } from "@hauktui/core";
+
+export interface PopoverProps {
+  /** Content to display in the popover */
+  content: React.ReactNode;
+  /** Trigger element */
+  children: React.ReactNode;
+  /** Whether the popover is open */
+  open: boolean;
+  /** Position relative to trigger */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Popover width */
+  width?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Optional title */
+  title?: string;
+}
+
+export function Popover({
+  content,
+  children,
+  open,
+  position = "bottom",
+  width = 30,
+  tokens: propTokens,
+  focusId,
+  title,
+}: PopoverProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("popover");
+  const { isFocused } = useFocusable(id);
+
+  const popoverContent = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      width,
+      paddingX: 1,
+      paddingY: 0,
+    },
+    title
+      ? React.createElement(
+          Box,
+          { marginBottom: 0 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        )
+      : null,
+    title
+      ? React.createElement(
+          Box,
+          { marginBottom: 0 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.border },
+            "─".repeat(width - 4)
+          )
+        )
+      : null,
+    React.createElement(Box, { flexDirection: "column" }, content)
+  );
+
+  if (!open) {
+    return React.createElement(Box, null, children);
+  }
+
+  const isVertical = position === "top" || position === "bottom";
+
+  const containerProps: Record<string, unknown> = {
+    flexDirection: isVertical ? "column" : "row",
+    alignItems: isVertical ? "flex-start" : "center",
+    gap: 0,
+  };
+
+  if (position === "top") {
+    return React.createElement(Box, containerProps, popoverContent, children);
+  }
+
+  if (position === "bottom") {
+    return React.createElement(Box, containerProps, children, popoverContent);
+  }
+
+  if (position === "left") {
+    return React.createElement(Box, containerProps, popoverContent, children);
+  }
+
+  // right
+  return React.createElement(Box, containerProps, children, popoverContent);
+}

package/components/progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from "./progress.js";
+export type { ProgressProps } from "./progress.js";

package/components/progress/progress.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface ProgressProps {
+  /** Progress value (0-100) */
+  value: number;
+  /** Progress bar width in characters */
+  width?: number;
+  /** Show percentage label */
+  showLabel?: boolean;
+  /** Label position */
+  labelPosition?: "left" | "right" | "inside";
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Fill character */
+  fillChar?: string;
+  /** Empty character */
+  emptyChar?: string;
+}
+
+export function Progress({
+  value,
+  width = 20,
+  showLabel = true,
+  labelPosition = "right",
+  tokens: propTokens,
+  fillChar = "█",
+  emptyChar = "░",
+}: ProgressProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  // Clamp value between 0 and 100
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const filled = Math.round((clampedValue / 100) * width);
+  const empty = width - filled;
+
+  const bar = fillChar.repeat(filled) + emptyChar.repeat(empty);
+  const label = `${Math.round(clampedValue)}%`;
+
+  // Determine color based on progress
+  let color = tokens.colors.accent;
+  if (clampedValue >= 100) {
+    color = tokens.colors.success;
+  } else if (clampedValue < 30) {
+    color = tokens.colors.warning;
+  }
+
+  const labelElement = showLabel
+    ? React.createElement(Text, { color: tokens.colors.muted }, label)
+    : null;
+
+  if (labelPosition === "inside") {
+    return React.createElement(
+      Box,
+      null,
+      React.createElement(Text, { color }, "["),
+      React.createElement(Text, { color }, bar),
+      React.createElement(Text, { color }, "] "),
+      labelElement
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { gap: 1 },
+    labelPosition === "left" ? labelElement : null,
+    React.createElement(Text, { color }, bar),
+    labelPosition === "right" ? labelElement : null
+  );
+}

package/components/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from "./radio-group.js";
+export type { RadioGroupProps, RadioOption } from "./radio-group.js";