@hauktui/registry 0.0.1

package/components/stat/stat.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface StatProps {
+  /** Stat label */
+  label: string;
+  /** Stat value */
+  value: string | number;
+  /** Optional delta/change indicator */
+  delta?: {
+    value: string | number;
+    type: "increase" | "decrease" | "neutral";
+  };
+  /** Optional icon */
+  icon?: string;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Stat({
+  label,
+  value,
+  delta,
+  icon,
+  size = "md",
+  tokens: propTokens,
+}: StatProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  // Get delta color and symbol
+  const getDeltaStyle = () => {
+    if (!delta) return null;
+
+    switch (delta.type) {
+      case "increase":
+        return { color: tokens.colors.success, symbol: "↑" };
+      case "decrease":
+        return { color: tokens.colors.danger, symbol: "↓" };
+      default:
+        return { color: tokens.colors.muted, symbol: "→" };
+    }
+  };
+
+  const deltaStyle = getDeltaStyle();
+
+  // Get value size based on size prop
+  const getValueSize = () => {
+    switch (size) {
+      case "sm":
+        return false;
+      case "lg":
+        return true;
+      default:
+        return true;
+    }
+  };
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    // Label with optional icon
+    React.createElement(
+      Box,
+      { gap: 1 },
+      icon && React.createElement(Text, {}, icon),
+      React.createElement(Text, { color: tokens.colors.muted }, label)
+    ),
+    // Value
+    React.createElement(
+      Box,
+      { gap: 1, alignItems: "baseline" },
+      React.createElement(
+        Text,
+        {
+          bold: getValueSize(),
+          color: tokens.colors.fg,
+        },
+        String(value)
+      ),
+      // Delta indicator
+      delta &&
+        deltaStyle &&
+        React.createElement(
+          Text,
+          { color: deltaStyle.color },
+          `${deltaStyle.symbol} ${delta.value}`
+        )
+    )
+  );
+}
+
+export interface StatGroupProps {
+  /** Stats to display */
+  stats: StatProps[];
+  /** Layout direction */
+  direction?: "horizontal" | "vertical";
+  /** Show dividers between stats */
+  showDividers?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function StatGroup({
+  stats,
+  direction = "horizontal",
+  showDividers = true,
+  tokens: propTokens,
+}: StatGroupProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: direction === "horizontal" ? "row" : "column",
+      gap: direction === "horizontal" ? 3 : 1,
+    },
+    stats.map((stat, index) =>
+      React.createElement(
+        React.Fragment,
+        { key: index },
+        index > 0 &&
+          showDividers &&
+          React.createElement(
+            Text,
+            { color: tokens.colors.border },
+            direction === "horizontal" ? "│" : "───────────"
+          ),
+        React.createElement(Stat, { ...stat, tokens })
+      )
+    )
+  );
+}

package/components/stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper } from "./stepper.js";
+export type { StepperProps, Step } from "./stepper.js";

package/components/stepper/stepper.tsx

@@ -0,0 +1,219 @@
+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 Step {
+  /** Step title */
+  title: string;
+  /** Step description */
+  description?: string;
+  /** Optional icon */
+  icon?: string;
+  /** Whether this step is optional */
+  optional?: boolean;
+}
+
+export interface StepperProps {
+  /** Steps to display */
+  steps: Step[];
+  /** Current active step (0-indexed) */
+  activeStep: number;
+  /** Callback when step changes */
+  onStepChange?: (step: number) => void;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Allow clicking on steps to navigate */
+  clickable?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Stepper({
+  steps,
+  activeStep,
+  onStepChange,
+  orientation = "horizontal",
+  clickable = false,
+  tokens: propTokens,
+  focusId,
+}: StepperProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("stepper");
+  const { isFocused } = useFocusable(id);
+
+  const [focusedStep, setFocusedStep] = useState(activeStep);
+
+  // Handle keyboard input
+  useInput(
+    (input, key) => {
+      if (!isFocused || !clickable) return;
+
+      if (orientation === "horizontal") {
+        if (key.leftArrow || input === "h") {
+          setFocusedStep((prev) => Math.max(0, prev - 1));
+        } else if (key.rightArrow || input === "l") {
+          setFocusedStep((prev) => Math.min(steps.length - 1, prev + 1));
+        }
+      } else {
+        if (key.upArrow || input === "k") {
+          setFocusedStep((prev) => Math.max(0, prev - 1));
+        } else if (key.downArrow || input === "j") {
+          setFocusedStep((prev) => Math.min(steps.length - 1, prev + 1));
+        }
+      }
+
+      if (key.return || input === " ") {
+        onStepChange?.(focusedStep);
+      }
+    },
+    { isActive: isFocused && clickable }
+  );
+
+  // Get step status
+  const getStepStatus = (
+    index: number
+  ): "completed" | "active" | "upcoming" => {
+    if (index < activeStep) return "completed";
+    if (index === activeStep) return "active";
+    return "upcoming";
+  };
+
+  // Get step icon
+  const getStepIcon = (step: Step, index: number): string => {
+    if (step.icon) return step.icon;
+    const status = getStepStatus(index);
+    if (status === "completed") return "✓";
+    return String(index + 1);
+  };
+
+  // Get step colors
+  const getStepColors = (
+    index: number,
+    isFocusedItem: boolean
+  ): { bg: string; fg: string; text: string } => {
+    const status = getStepStatus(index);
+
+    if (isFocusedItem && clickable) {
+      return {
+        bg: tokens.colors.accent,
+        fg: tokens.colors.bg,
+        text: tokens.colors.accent,
+      };
+    }
+
+    switch (status) {
+      case "completed":
+        return {
+          bg: tokens.colors.success,
+          fg: tokens.colors.bg,
+          text: tokens.colors.success,
+        };
+      case "active":
+        return {
+          bg: tokens.colors.accent,
+          fg: tokens.colors.bg,
+          text: tokens.colors.fg,
+        };
+      default:
+        return {
+          bg: tokens.colors.border,
+          fg: tokens.colors.muted,
+          text: tokens.colors.muted,
+        };
+    }
+  };
+
+  // Render step
+  const renderStep = (step: Step, index: number) => {
+    const status = getStepStatus(index);
+    const isFocusedItem = isFocused && clickable && index === focusedStep;
+    const colors = getStepColors(index, isFocusedItem);
+    const icon = getStepIcon(step, index);
+    const isLast = index === steps.length - 1;
+
+    return React.createElement(
+      Box,
+      {
+        key: index,
+        flexDirection: orientation === "horizontal" ? "column" : "row",
+        alignItems: orientation === "horizontal" ? "center" : "flex-start",
+        gap: 1,
+      },
+      // Step indicator
+      React.createElement(
+        Box,
+        {
+          flexDirection: orientation === "horizontal" ? "row" : "column",
+          alignItems: "center",
+        },
+        // Step circle
+        React.createElement(
+          Text,
+          {
+            backgroundColor: colors.bg,
+            color: colors.fg,
+            bold: status === "active",
+          },
+          ` ${icon} `
+        ),
+        // Connector line
+        !isLast &&
+          React.createElement(
+            Text,
+            {
+              color:
+                status === "completed"
+                  ? tokens.colors.success
+                  : tokens.colors.border,
+            },
+            orientation === "horizontal" ? "───" : "\n│\n│"
+          )
+      ),
+      // Step content
+      React.createElement(
+        Box,
+        {
+          flexDirection: "column",
+          alignItems: orientation === "horizontal" ? "center" : "flex-start",
+        },
+        React.createElement(
+          Text,
+          {
+            color: colors.text,
+            bold: status === "active",
+          },
+          step.title
+        ),
+        step.description &&
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            step.description
+          ),
+        step.optional &&
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, italic: true },
+            "(Optional)"
+          )
+      )
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      borderStyle: isFocused && clickable ? "round" : undefined,
+      borderColor: isFocused ? tokens.colors.focus : undefined,
+      padding: isFocused && clickable ? 1 : 0,
+      gap: orientation === "horizontal" ? 0 : 1,
+    },
+    steps.map(renderStep)
+  );
+}

package/components/switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from "./switch.js";
+export type { SwitchProps } from "./switch.js";

package/components/switch/switch.tsx

@@ -0,0 +1,102 @@
+import React 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 SwitchProps {
+  /** Whether the switch is on */
+  checked: boolean;
+  /** Callback when switch is toggled */
+  onCheckedChange: (checked: boolean) => void;
+  /** Label for the switch */
+  label?: string;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Size of the switch */
+  size?: "sm" | "md" | "lg";
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Switch({
+  checked,
+  onCheckedChange,
+  label,
+  disabled = false,
+  size = "md",
+  tokens: propTokens,
+  focusId,
+}: SwitchProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("switch");
+  const { isFocused } = useFocusable(id);
+
+  useInput(
+    (input, key) => {
+      if (disabled) return;
+      if (input === " " || key.return) {
+        onCheckedChange(!checked);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const sizes = {
+    sm: { width: 4, thumb: 1 },
+    md: { width: 6, thumb: 2 },
+    lg: { width: 8, thumb: 3 },
+  };
+
+  const { width, thumb } = sizes[size];
+
+  const trackColor = checked ? tokens.colors.accent : tokens.colors.muted;
+
+  const thumbPosition = checked ? width - thumb - 2 : 0;
+
+  const track = React.createElement(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : trackColor,
+      paddingX: 0,
+    },
+    React.createElement(
+      Box,
+      { width, justifyContent: checked ? "flex-end" : "flex-start" },
+      React.createElement(
+        Text,
+        {
+          backgroundColor: checked ? tokens.colors.accent : tokens.colors.muted,
+          color: tokens.colors.bg,
+        },
+        checked ? " ON " : " OFF"
+      )
+    )
+  );
+
+  if (!label) {
+    return track;
+  }
+
+  return React.createElement(
+    Box,
+    {
+      gap: 2,
+      alignItems: "center",
+      opacity: disabled ? 0.5 : 1,
+    },
+    track,
+    React.createElement(
+      Text,
+      {
+        color: disabled ? tokens.colors.muted : tokens.colors.fg,
+        dimColor: disabled,
+      },
+      label
+    )
+  );
+}

package/components/table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from "./table.js";
+export type { TableProps, TableColumn } from "./table.js";

package/components/table/table.tsx

@@ -0,0 +1,242 @@
+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, truncate } from "@hauktui/core";
+
+export interface TableColumn<T> {
+  /** Column header */
+  header: string;
+  /** Key or accessor function */
+  accessor: keyof T | ((row: T) => string);
+  /** Column width */
+  width?: number;
+  /** Text alignment */
+  align?: "left" | "center" | "right";
+}
+
+export interface TableProps<T> {
+  /** Data rows */
+  data: T[];
+  /** Column definitions */
+  columns: TableColumn<T>[];
+  /** Callback when row is selected */
+  onSelect?: (row: T, index: number) => void;
+  /** Whether rows are selectable */
+  selectable?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Maximum visible rows (for scrolling) */
+  maxRows?: number;
+  /** Show row numbers */
+  showRowNumbers?: boolean;
+}
+
+export function Table<T>({
+  data,
+  columns,
+  onSelect,
+  selectable = true,
+  tokens: propTokens,
+  focusId,
+  maxRows = 10,
+  showRowNumbers = false,
+}: TableProps<T>): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("table");
+  const { isFocused } = useFocusable(id);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const getCellValue = useCallback(
+    (row: T, column: TableColumn<T>): string => {
+      if (typeof column.accessor === "function") {
+        return column.accessor(row);
+      }
+      const value = row[column.accessor];
+      return String(value ?? "");
+    },
+    []
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || !selectable) return;
+
+      if (key.upArrow) {
+        setSelectedIndex((prev) => {
+          const next = Math.max(0, prev - 1);
+          if (next < scrollOffset) {
+            setScrollOffset(next);
+          }
+          return next;
+        });
+      } else if (key.downArrow) {
+        setSelectedIndex((prev) => {
+          const next = Math.min(data.length - 1, prev + 1);
+          if (next >= scrollOffset + maxRows) {
+            setScrollOffset(next - maxRows + 1);
+          }
+          return next;
+        });
+      } else if (key.return) {
+        const selectedRow = data[selectedIndex];
+        if (selectedRow) {
+          onSelect?.(selectedRow, selectedIndex);
+        }
+      } else if (key.pageUp || (key.ctrl && input === "u")) {
+        setSelectedIndex((prev) => {
+          const next = Math.max(0, prev - maxRows);
+          setScrollOffset(Math.max(0, scrollOffset - maxRows));
+          return next;
+        });
+      } else if (key.pageDown || (key.ctrl && input === "d")) {
+        setSelectedIndex((prev) => {
+          const next = Math.min(data.length - 1, prev + maxRows);
+          setScrollOffset(Math.min(data.length - maxRows, scrollOffset + maxRows));
+          return next;
+        });
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const visibleData = data.slice(scrollOffset, scrollOffset + maxRows);
+  const defaultWidth = 15;
+
+  // Render header
+  const renderHeader = () => {
+    const cells: React.ReactElement[] = [];
+    
+    if (showRowNumbers) {
+      cells.push(
+        React.createElement(
+          Box,
+          { key: "rownum", width: 4 },
+          React.createElement(Text, { bold: true, color: tokens.colors.muted }, "#")
+        )
+      );
+    }
+
+    for (const column of columns) {
+      const width = column.width ?? defaultWidth;
+      cells.push(
+        React.createElement(
+          Box,
+          { key: column.header, width },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.accent },
+            truncate(column.header, width)
+          )
+        )
+      );
+    }
+
+    return React.createElement(Box, { gap: 1 }, ...cells);
+  };
+
+  // Render rows
+  const renderRows = () => {
+    return visibleData.map((row, visibleIndex) => {
+      const actualIndex = scrollOffset + visibleIndex;
+      const isSelected = actualIndex === selectedIndex;
+      const cells: React.ReactElement[] = [];
+
+      if (showRowNumbers) {
+        cells.push(
+          React.createElement(
+            Box,
+            { key: "rownum", width: 4 },
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted },
+              String(actualIndex + 1)
+            )
+          )
+        );
+      }
+
+      for (const column of columns) {
+        const width = column.width ?? defaultWidth;
+        const value = getCellValue(row, column);
+        
+        cells.push(
+          React.createElement(
+            Box,
+            { key: column.header, width },
+            React.createElement(
+              Text,
+              {
+                color: isSelected && isFocused
+                  ? tokens.colors.accent
+                  : tokens.colors.fg,
+                bold: isSelected && isFocused,
+              },
+              truncate(value, width)
+            )
+          )
+        );
+      }
+
+      return React.createElement(
+        Box,
+        {
+          key: actualIndex,
+          gap: 1,
+          paddingLeft: isSelected && isFocused ? 0 : 1,
+        },
+        isSelected && isFocused
+          ? React.createElement(Text, { color: tokens.colors.accent }, "›")
+          : null,
+        ...cells
+      );
+    });
+  };
+
+  // Render scroll indicator
+  const renderScrollIndicator = () => {
+    if (data.length <= maxRows) return null;
+    
+    const showUp = scrollOffset > 0;
+    const showDown = scrollOffset + maxRows < data.length;
+    
+    return React.createElement(
+      Box,
+      { justifyContent: "flex-end", paddingRight: 1 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted },
+        showUp ? "↑" : " ",
+        ` ${scrollOffset + 1}-${Math.min(scrollOffset + maxRows, data.length)}/${data.length} `,
+        showDown ? "↓" : " "
+      )
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+    },
+    renderHeader(),
+    React.createElement(
+      Box,
+      { marginY: 0 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.border },
+        "─".repeat(columns.reduce((sum, c) => sum + (c.width ?? defaultWidth) + 1, showRowNumbers ? 5 : 0))
+      )
+    ),
+    React.createElement(Box, { flexDirection: "column" }, ...renderRows()),
+    renderScrollIndicator()
+  );
+}

package/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./tabs.js";
+export type { TabsProps, Tab } from "./tabs.js";