@hauktui/registry 0.0.1

package/components/chart/chart.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface ChartDataPoint {
+  /** Label for the data point */
+  label: string;
+  /** Value */
+  value: number;
+  /** Optional color */
+  color?: string;
+}
+
+export interface ChartProps {
+  /** Chart data */
+  data: ChartDataPoint[];
+  /** Chart type */
+  type?: "bar" | "horizontal-bar" | "sparkline";
+  /** Chart title */
+  title?: string;
+  /** Maximum width for bars */
+  maxWidth?: number;
+  /** Show values */
+  showValues?: boolean;
+  /** Show labels */
+  showLabels?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Height for sparkline */
+  height?: number;
+}
+
+const SPARKLINE_CHARS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+
+export function Chart({
+  data,
+  type = "horizontal-bar",
+  title,
+  maxWidth = 30,
+  showValues = true,
+  showLabels = true,
+  tokens: propTokens,
+  height = 1,
+}: ChartProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const minValue = Math.min(...data.map((d) => d.value));
+
+  if (type === "sparkline") {
+    const range = maxValue - minValue || 1;
+    const sparkline = data.map((point) => {
+      const normalized = (point.value - minValue) / range;
+      const charIndex = Math.floor(normalized * (SPARKLINE_CHARS.length - 1));
+      return SPARKLINE_CHARS[charIndex];
+    });
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      title
+        ? React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        : null,
+      React.createElement(
+        Text,
+        { color: tokens.colors.accent },
+        sparkline.join("")
+      ),
+      showValues
+        ? React.createElement(
+            Box,
+            { justifyContent: "space-between" },
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              minValue.toString()
+            ),
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              maxValue.toString()
+            )
+          )
+        : null
+    );
+  }
+
+  if (type === "bar") {
+    // Vertical bar chart
+    const barHeight = 8;
+    const rows: React.ReactElement[] = [];
+
+    for (let row = barHeight; row >= 1; row--) {
+      const cells = data.map((point, index) => {
+        const barLevel = Math.ceil((point.value / maxValue) * barHeight);
+        const filled = row <= barLevel;
+        return React.createElement(
+          Text,
+          {
+            key: `${point.label}-${row}`,
+            color: filled
+              ? point.color || tokens.colors.accent
+              : tokens.colors.muted,
+          },
+          filled ? "█" : " ",
+          " "
+        );
+      });
+
+      rows.push(React.createElement(Box, { key: `row-${row}` }, ...cells));
+    }
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      title
+        ? React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        : null,
+      ...rows,
+      showLabels
+        ? React.createElement(
+            Box,
+            null,
+            ...data.map((point) =>
+              React.createElement(
+                Text,
+                { key: point.label, color: tokens.colors.muted },
+                point.label.charAt(0),
+                " "
+              )
+            )
+          )
+        : null
+    );
+  }
+
+  // Horizontal bar chart (default)
+  const maxLabelLength = Math.max(...data.map((d) => d.label.length));
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    title
+      ? React.createElement(
+          Text,
+          { bold: true, color: tokens.colors.fg, marginBottom: 1 },
+          title
+        )
+      : null,
+    ...data.map((point) => {
+      const barWidth = Math.round((point.value / maxValue) * maxWidth);
+      const bar = "█".repeat(barWidth) + "░".repeat(maxWidth - barWidth);
+
+      return React.createElement(
+        Box,
+        { key: point.label, gap: 1 },
+        showLabels
+          ? React.createElement(
+              Text,
+              { color: tokens.colors.fg },
+              point.label.padEnd(maxLabelLength)
+            )
+          : null,
+        React.createElement(
+          Text,
+          { color: point.color || tokens.colors.accent },
+          bar
+        ),
+        showValues
+          ? React.createElement(
+              Text,
+              { color: tokens.colors.muted },
+              point.value.toString()
+            )
+          : null
+      );
+    })
+  );
+}

package/components/chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from "./chart.js";
+export type { ChartProps, ChartDataPoint } from "./chart.js";

package/components/checkbox/checkbox.tsx

@@ -0,0 +1,98 @@
+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 CheckboxProps {
+  /** Whether the checkbox is checked (controlled) */
+  checked?: boolean;
+  /** Default checked state (uncontrolled) */
+  defaultChecked?: boolean;
+  /** Callback when checked state changes */
+  onChange?: (checked: boolean) => void;
+  /** Checkbox label */
+  label: string;
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Custom checked indicator */
+  checkedIndicator?: string;
+  /** Custom unchecked indicator */
+  uncheckedIndicator?: string;
+}
+
+export function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  label,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  checkedIndicator = "◉",
+  uncheckedIndicator = "○",
+}: CheckboxProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("checkbox");
+  const { isFocused } = useFocusable(id);
+
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const newValue = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newValue);
+    }
+    onChange?.(newValue);
+  }, [disabled, isChecked, isControlled, onChange]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+      if (key.return || input === " ") {
+        toggle();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const indicatorColor = disabled
+    ? tokens.colors.disabled
+    : isChecked
+    ? tokens.colors.accent
+    : tokens.colors.muted;
+
+  const labelColor = disabled
+    ? tokens.colors.disabled
+    : isFocused
+    ? tokens.colors.fg
+    : tokens.colors.muted;
+
+  return React.createElement(
+    Box,
+    {
+      paddingX: 1,
+      borderStyle: isFocused ? "round" : undefined,
+      borderColor: isFocused ? tokens.colors.focus : undefined,
+    },
+    React.createElement(
+      Text,
+      { color: indicatorColor },
+      isChecked ? checkedIndicator : uncheckedIndicator
+    ),
+    React.createElement(Text, null, " "),
+    React.createElement(
+      Text,
+      { color: labelColor, bold: isFocused },
+      label
+    )
+  );
+}

package/components/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.js";
+export type { CheckboxProps } from "./checkbox.js";

package/components/code-block/code-block.tsx

@@ -0,0 +1,214 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface CodeBlockProps {
+  /** Code content */
+  children: string;
+  /** Programming language for syntax highlighting */
+  language?: string;
+  /** Show line numbers */
+  showLineNumbers?: boolean;
+  /** Starting line number */
+  startLine?: number;
+  /** Highlight specific lines (1-indexed) */
+  highlightLines?: number[];
+  /** Title/filename to display */
+  title?: string;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Maximum width */
+  maxWidth?: number;
+}
+
+// Simple syntax highlighting patterns
+const patterns: Record<string, { pattern: RegExp; color: string }[]> = {
+  javascript: [
+    { pattern: /(\/\/.*$)/gm, color: "comment" },
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, color: "comment" },
+    {
+      pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g,
+      color: "string",
+    },
+    {
+      pattern:
+        /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|async|await|try|catch|throw|new|this|typeof|instanceof)\b/g,
+      color: "keyword",
+    },
+    {
+      pattern: /\b(true|false|null|undefined|NaN|Infinity)\b/g,
+      color: "literal",
+    },
+    { pattern: /\b(\d+\.?\d*)\b/g, color: "number" },
+    { pattern: /\b([A-Z][a-zA-Z0-9]*)\b/g, color: "type" },
+  ],
+  typescript: [
+    { pattern: /(\/\/.*$)/gm, color: "comment" },
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, color: "comment" },
+    {
+      pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g,
+      color: "string",
+    },
+    {
+      pattern:
+        /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|async|await|try|catch|throw|new|this|typeof|instanceof|interface|type|extends|implements)\b/g,
+      color: "keyword",
+    },
+    {
+      pattern: /\b(true|false|null|undefined|NaN|Infinity)\b/g,
+      color: "literal",
+    },
+    { pattern: /\b(\d+\.?\d*)\b/g, color: "number" },
+    { pattern: /\b([A-Z][a-zA-Z0-9]*)\b/g, color: "type" },
+    { pattern: /:\s*([a-zA-Z]+)/g, color: "type" },
+  ],
+  python: [
+    { pattern: /(#.*$)/gm, color: "comment" },
+    { pattern: /("""[\s\S]*?"""|'''[\s\S]*?''')/g, color: "string" },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, color: "string" },
+    {
+      pattern:
+        /\b(def|class|return|if|elif|else|for|while|import|from|as|try|except|raise|with|lambda|and|or|not|in|is|None|True|False)\b/g,
+      color: "keyword",
+    },
+    { pattern: /\b(\d+\.?\d*)\b/g, color: "number" },
+    { pattern: /@(\w+)/g, color: "decorator" },
+  ],
+  bash: [
+    { pattern: /(#.*$)/gm, color: "comment" },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, color: "string" },
+    {
+      pattern:
+        /\b(if|then|else|elif|fi|for|while|do|done|case|esac|function|return|exit|export|source)\b/g,
+      color: "keyword",
+    },
+    { pattern: /(\$\{?[a-zA-Z_][a-zA-Z0-9_]*\}?)/g, color: "variable" },
+  ],
+  json: [
+    { pattern: /("(?:[^"\\]|\\.)*")\s*:/g, color: "key" },
+    { pattern: /:\s*("(?:[^"\\]|\\.)*")/g, color: "string" },
+    { pattern: /\b(true|false|null)\b/g, color: "literal" },
+    { pattern: /\b(-?\d+\.?\d*)\b/g, color: "number" },
+  ],
+};
+
+export function CodeBlock({
+  children,
+  language = "text",
+  showLineNumbers = true,
+  startLine = 1,
+  highlightLines = [],
+  title,
+  tokens: propTokens,
+  maxWidth,
+}: CodeBlockProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const lines = children.split("\n");
+  const lineNumberWidth = String(startLine + lines.length - 1).length;
+
+  // Get color for syntax type
+  const getColor = (type: string): string => {
+    switch (type) {
+      case "comment":
+        return tokens.colors.muted;
+      case "string":
+        return tokens.colors.success;
+      case "keyword":
+        return tokens.colors.accent;
+      case "literal":
+        return tokens.colors.warning;
+      case "number":
+        return tokens.colors.info;
+      case "type":
+        return tokens.colors.accent;
+      case "variable":
+        return tokens.colors.warning;
+      case "key":
+        return tokens.colors.accent;
+      case "decorator":
+        return tokens.colors.warning;
+      default:
+        return tokens.colors.fg;
+    }
+  };
+
+  // Simple tokenizer (basic highlighting without complex parsing)
+  const highlightCode = (code: string, lang: string): React.ReactNode[] => {
+    // For simplicity, return plain text with basic coloring
+    // A full implementation would tokenize and apply colors
+    return [
+      React.createElement(Text, { key: "code", color: tokens.colors.fg }, code),
+    ];
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: tokens.colors.border,
+      ...(maxWidth ? { width: maxWidth } : {}),
+    },
+    // Title bar
+    title &&
+      React.createElement(
+        Box,
+        {
+          paddingX: 1,
+          borderStyle: "single",
+          borderTop: false,
+          borderLeft: false,
+          borderRight: false,
+          borderColor: tokens.colors.border,
+        },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, bold: true },
+          title
+        ),
+        language !== "text" &&
+          React.createElement(
+            Text,
+            { color: tokens.colors.accent },
+            ` (${language})`
+          )
+      ),
+    // Code content
+    React.createElement(
+      Box,
+      { flexDirection: "column", paddingX: 1, paddingY: title ? 0 : 1 },
+      lines.map((line, index) => {
+        const lineNum = startLine + index;
+        const isHighlighted = highlightLines.includes(lineNum);
+
+        return React.createElement(
+          Box,
+          { key: index },
+          // Line number
+          showLineNumbers &&
+            React.createElement(
+              Text,
+              {
+                color: isHighlighted
+                  ? tokens.colors.accent
+                  : tokens.colors.muted,
+              },
+              String(lineNum).padStart(lineNumberWidth, " ") + " │ "
+            ),
+          // Code line
+          React.createElement(
+            Text,
+            {
+              color: tokens.colors.fg,
+              backgroundColor: isHighlighted ? tokens.colors.border : undefined,
+            },
+            line || " "
+          )
+        );
+      })
+    )
+  );
+}

package/components/code-block/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from "./code-block.js";
+export type { CodeBlockProps } from "./code-block.js";

package/components/collapsible/collapsible.tsx

@@ -0,0 +1,123 @@
+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 CollapsibleProps {
+  /** Title/trigger for the collapsible */
+  title: string;
+  /** Content when expanded */
+  children: React.ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state for uncontrolled mode */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether the collapsible is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Icon when collapsed */
+  collapsedIcon?: string;
+  /** Icon when expanded */
+  expandedIcon?: string;
+}
+
+export function Collapsible({
+  title,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  collapsedIcon = "▶",
+  expandedIcon = "▼",
+}: CollapsibleProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("collapsible");
+  const { isFocused } = useFocusable(id);
+
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isOpen, isControlled, disabled, onOpenChange]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.return || input === " ") {
+        toggle();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const icon = isOpen ? expandedIcon : collapsedIcon;
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    // Trigger
+    React.createElement(
+      Box,
+      {
+        borderStyle: isFocused ? "round" : "single",
+        borderColor: disabled
+          ? tokens.colors.disabled
+          : isFocused
+            ? tokens.colors.focus
+            : tokens.colors.border,
+        paddingX: 1,
+      },
+      React.createElement(
+        Text,
+        {
+          color: disabled
+            ? tokens.colors.disabled
+            : isFocused
+              ? tokens.colors.accent
+              : tokens.colors.fg,
+          bold: isFocused,
+          dimColor: disabled,
+        },
+        icon,
+        " ",
+        title
+      )
+    ),
+    // Content
+    isOpen
+      ? React.createElement(
+          Box,
+          {
+            flexDirection: "column",
+            paddingLeft: 2,
+            borderStyle: "single",
+            borderColor: tokens.colors.border,
+            borderTop: false,
+            borderRight: false,
+            borderBottom: false,
+            marginLeft: 1,
+          },
+          children
+        )
+      : null
+  );
+}

package/components/collapsible/index.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from "./collapsible.js";
+export type { CollapsibleProps } from "./collapsible.js";