@hauktui/registry 0.0.1

package/components/radio-group/radio-group.tsx

@@ -0,0 +1,167 @@
+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 RadioOption<T = string> {
+  /** Display label */
+  label: string;
+  /** Option value */
+  value: T;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps<T = string> {
+  /** Available options */
+  options: RadioOption<T>[];
+  /** Controlled value */
+  value?: T;
+  /** Default value for uncontrolled mode */
+  defaultValue?: T;
+  /** Callback when selection changes */
+  onChange?: (value: T) => void;
+  /** Group label */
+  label?: string;
+  /** Whether the entire group is disabled */
+  disabled?: boolean;
+  /** Layout direction */
+  direction?: "vertical" | "horizontal";
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function RadioGroup<T = string>({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  label,
+  disabled = false,
+  direction = "vertical",
+  tokens: propTokens,
+  focusId,
+}: RadioGroupProps<T>): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("radio-group");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState<T | undefined>(defaultValue);
+  const [highlightedIndex, setHighlightedIndex] = useState(() => {
+    const currentValue = controlledValue ?? defaultValue;
+    if (currentValue !== undefined) {
+      const idx = options.findIndex((o) => o.value === currentValue);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const selectOption = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (!option || option.disabled || disabled) return;
+
+      if (!isControlled) {
+        setInternalValue(option.value);
+      }
+      onChange?.(option.value);
+    },
+    [options, isControlled, disabled, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      const isVertical = direction === "vertical";
+      const prevKey = isVertical ? key.upArrow : key.leftArrow;
+      const nextKey = isVertical ? key.downArrow : key.rightArrow;
+
+      if (prevKey) {
+        setHighlightedIndex((prev) => {
+          let next = prev - 1;
+          while (next >= 0 && options[next]?.disabled) {
+            next--;
+          }
+          return clamp(next, 0, options.length - 1);
+        });
+      } else if (nextKey) {
+        setHighlightedIndex((prev) => {
+          let next = prev + 1;
+          while (next < options.length && options[next]?.disabled) {
+            next++;
+          }
+          return clamp(next, 0, options.length - 1);
+        });
+      } else if (key.return || input === " ") {
+        selectOption(highlightedIndex);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : undefined,
+      borderColor: isFocused ? tokens.colors.focus : undefined,
+      paddingX: isFocused ? 1 : 0,
+    },
+    label
+      ? React.createElement(
+          Box,
+          { marginBottom: 1 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            label
+          )
+        )
+      : null,
+    React.createElement(
+      Box,
+      {
+        flexDirection: direction === "vertical" ? "column" : "row",
+        gap: direction === "vertical" ? 0 : 2,
+      },
+      options.map((option, index) => {
+        const isSelected = option.value === currentValue;
+        const isHighlighted = index === highlightedIndex;
+        const isDisabled = option.disabled ?? disabled;
+
+        let color = tokens.colors.fg;
+        if (isDisabled) {
+          color = tokens.colors.disabled;
+        } else if (isHighlighted && isFocused) {
+          color = tokens.colors.accent;
+        }
+
+        const indicator = isSelected ? "●" : "○";
+
+        return React.createElement(
+          Box,
+          { key: index },
+          React.createElement(
+            Text,
+            {
+              color: isSelected ? tokens.colors.accent : color,
+              bold: isHighlighted && isFocused,
+              dimColor: isDisabled,
+            },
+            indicator,
+            " ",
+            option.label
+          )
+        );
+      })
+    )
+  );
+}

package/components/resizable/index.ts

@@ -0,0 +1,2 @@
+export { Resizable } from "./resizable.js";
+export type { ResizableProps } from "./resizable.js";

package/components/resizable/resizable.tsx

@@ -0,0 +1,141 @@
+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, clamp } from "@hauktui/core";
+
+export interface ResizableProps {
+  /** Child panels */
+  children: React.ReactNode[];
+  /** Direction of resize */
+  direction?: "horizontal" | "vertical";
+  /** Initial sizes (percentages, should sum to 100) */
+  defaultSizes?: number[];
+  /** Minimum size for each panel */
+  minSize?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Resizable({
+  children,
+  direction = "horizontal",
+  defaultSizes,
+  minSize = 10,
+  tokens: propTokens,
+  focusId,
+}: ResizableProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("resizable");
+  const { isFocused } = useFocusable(id);
+
+  const panelCount = React.Children.count(children);
+  const initialSizes = defaultSizes || Array(panelCount).fill(100 / panelCount);
+  const [sizes, setSizes] = useState<number[]>(initialSizes);
+  const [activeHandle, setActiveHandle] = useState(0);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      // Switch between handles
+      if (key.tab) {
+        setActiveHandle((prev) => (prev + 1) % (panelCount - 1));
+        return;
+      }
+
+      const delta = 5;
+      const newSizes = [...sizes];
+
+      if (direction === "horizontal") {
+        if (key.leftArrow || input === "h") {
+          if (newSizes[activeHandle]! > minSize) {
+            newSizes[activeHandle] = newSizes[activeHandle]! - delta;
+            newSizes[activeHandle + 1] = newSizes[activeHandle + 1]! + delta;
+          }
+        } else if (key.rightArrow || input === "l") {
+          if (newSizes[activeHandle + 1]! > minSize) {
+            newSizes[activeHandle] = newSizes[activeHandle]! + delta;
+            newSizes[activeHandle + 1] = newSizes[activeHandle + 1]! - delta;
+          }
+        }
+      } else {
+        if (key.upArrow || input === "k") {
+          if (newSizes[activeHandle]! > minSize) {
+            newSizes[activeHandle] = newSizes[activeHandle]! - delta;
+            newSizes[activeHandle + 1] = newSizes[activeHandle + 1]! + delta;
+          }
+        } else if (key.downArrow || input === "j") {
+          if (newSizes[activeHandle + 1]! > minSize) {
+            newSizes[activeHandle] = newSizes[activeHandle]! + delta;
+            newSizes[activeHandle + 1] = newSizes[activeHandle + 1]! - delta;
+          }
+        }
+      }
+
+      setSizes(newSizes);
+    },
+    { isActive: isFocused }
+  );
+
+  const panels: React.ReactElement[] = [];
+  const childArray = React.Children.toArray(children);
+
+  childArray.forEach((child, index) => {
+    // Add panel
+    panels.push(
+      React.createElement(
+        Box,
+        {
+          key: `panel-${index}`,
+          flexDirection: "column",
+          flexGrow: sizes[index],
+          flexBasis: 0,
+          borderStyle: "single",
+          borderColor: tokens.colors.border,
+        },
+        child
+      )
+    );
+
+    // Add resize handle between panels
+    if (index < childArray.length - 1) {
+      const isActive = activeHandle === index;
+      panels.push(
+        React.createElement(
+          Box,
+          {
+            key: `handle-${index}`,
+            flexDirection: direction === "horizontal" ? "column" : "row",
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          React.createElement(
+            Text,
+            {
+              color:
+                isActive && isFocused
+                  ? tokens.colors.accent
+                  : tokens.colors.muted,
+              bold: isActive && isFocused,
+            },
+            direction === "horizontal" ? "┃" : "━"
+          )
+        )
+      );
+    }
+  });
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: direction === "horizontal" ? "row" : "column",
+      borderStyle: isFocused ? "double" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    ...panels
+  );
+}

package/components/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from "./scroll-area.js";
+export type { ScrollAreaProps } from "./scroll-area.js";

package/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,133 @@
+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 ScrollAreaProps {
+  /** Content to scroll */
+  children: React.ReactNode;
+  /** Maximum visible height (in lines) */
+  height: number;
+  /** Whether to show scrollbar */
+  showScrollbar?: boolean;
+  /** Whether the scroll area is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Scroll step (lines per scroll) */
+  scrollStep?: number;
+}
+
+export function ScrollArea({
+  children,
+  height,
+  showScrollbar = true,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  scrollStep = 1,
+}: ScrollAreaProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("scroll-area");
+  const { isFocused } = useFocusable(id);
+
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Convert children to array of lines for rendering
+  const childArray = React.Children.toArray(children);
+  const totalLines = childArray.length;
+  const maxScroll = Math.max(0, totalLines - height);
+
+  const scroll = useCallback(
+    (delta: number) => {
+      setScrollOffset((prev) => clamp(prev + delta, 0, maxScroll));
+    },
+    [maxScroll]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.upArrow || input === "k") {
+        scroll(-scrollStep);
+      } else if (key.downArrow || input === "j") {
+        scroll(scrollStep);
+      } else if (key.pageUp || (key.ctrl && input === "u")) {
+        scroll(-height);
+      } else if (key.pageDown || (key.ctrl && input === "d")) {
+        scroll(height);
+      } else if (input === "g") {
+        setScrollOffset(0);
+      } else if (input === "G") {
+        setScrollOffset(maxScroll);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Get visible content
+  const visibleChildren = childArray.slice(scrollOffset, scrollOffset + height);
+
+  // Render scrollbar
+  const renderScrollbar = () => {
+    if (!showScrollbar || totalLines <= height) return null;
+
+    const scrollbarHeight = height;
+    const thumbHeight = Math.max(
+      1,
+      Math.floor((height / totalLines) * scrollbarHeight)
+    );
+    const thumbPosition = Math.floor(
+      (scrollOffset / maxScroll) * (scrollbarHeight - thumbHeight)
+    );
+
+    const scrollbar: React.ReactElement[] = [];
+    for (let i = 0; i < scrollbarHeight; i++) {
+      const isThumb = i >= thumbPosition && i < thumbPosition + thumbHeight;
+      scrollbar.push(
+        React.createElement(
+          Text,
+          {
+            key: i,
+            color: isThumb ? tokens.colors.accent : tokens.colors.border,
+          },
+          isThumb ? "█" : "░"
+        )
+      );
+    }
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column", marginLeft: 1 },
+      scrollbar
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "row",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    // Content area
+    React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        flexGrow: 1,
+        paddingX: 1,
+        height,
+        overflow: "hidden",
+      },
+      ...visibleChildren
+    ),
+    // Scrollbar
+    renderScrollbar()
+  );
+}

package/components/select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./select.js";
+export type { SelectProps, SelectOption } from "./select.js";

package/components/select/select.tsx

@@ -0,0 +1,185 @@
+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, clamp } from "@hauktui/core";
+
+export interface SelectOption<T = string> {
+  /** Display label */
+  label: string;
+  /** Option value */
+  value: T;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+}
+
+export interface SelectProps<T = string> {
+  /** Available options */
+  options: SelectOption<T>[];
+  /** Controlled value */
+  value?: T;
+  /** Default value for uncontrolled mode */
+  defaultValue?: T;
+  /** Callback when selection changes */
+  onChange?: (value: T) => void;
+  /** Placeholder when no selection */
+  placeholder?: string;
+  /** Whether the select is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Show options in expanded list view */
+  expanded?: boolean;
+}
+
+export function Select<T = string>({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = "Select an option",
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  expanded = false,
+}: SelectProps<T>): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("select");
+  const { isFocused } = useFocusable(id);
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<T | undefined>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  // Highlighted index for keyboard navigation
+  const [highlightedIndex, setHighlightedIndex] = useState(() => {
+    if (currentValue !== undefined) {
+      const idx = options.findIndex((o) => o.value === currentValue);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  // Update highlighted index when value changes externally
+  useEffect(() => {
+    if (currentValue !== undefined) {
+      const idx = options.findIndex((o) => o.value === currentValue);
+      if (idx >= 0) setHighlightedIndex(idx);
+    }
+  }, [currentValue, options]);
+
+  const selectOption = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (!option || option.disabled) return;
+
+      if (!isControlled) {
+        setInternalValue(option.value);
+      }
+      onChange?.(option.value);
+    },
+    [options, isControlled, onChange]
+  );
+
+  // Handle keyboard navigation
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.upArrow) {
+        setHighlightedIndex((prev) => {
+          let next = prev - 1;
+          // Skip disabled options
+          while (next >= 0 && options[next]?.disabled) {
+            next--;
+          }
+          return clamp(next, 0, options.length - 1);
+        });
+      } else if (key.downArrow) {
+        setHighlightedIndex((prev) => {
+          let next = prev + 1;
+          // Skip disabled options
+          while (next < options.length && options[next]?.disabled) {
+            next++;
+          }
+          return clamp(next, 0, options.length - 1);
+        });
+      } else if (key.return || input === " ") {
+        selectOption(highlightedIndex);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Find the selected option
+  const selectedOption = options.find((o) => o.value === currentValue);
+
+  // Render collapsed view (single line)
+  if (!expanded) {
+    return React.createElement(
+      Box,
+      {
+        borderStyle: isFocused ? "round" : "single",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        paddingX: 1,
+      },
+      React.createElement(
+        Text,
+        {
+          color: selectedOption
+            ? tokens.colors.fg
+            : tokens.colors.muted,
+        },
+        selectedOption?.label ?? placeholder
+      ),
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted },
+        " ▼"
+      )
+    );
+  }
+
+  // Render expanded view (list)
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    options.map((option, index) => {
+      const isSelected = option.value === currentValue;
+      const isHighlighted = index === highlightedIndex;
+      const isDisabled = option.disabled;
+
+      let color = tokens.colors.fg;
+      if (isDisabled) {
+        color = tokens.colors.disabled;
+      } else if (isHighlighted) {
+        color = tokens.colors.accent;
+      }
+
+      const prefix = isSelected ? "● " : "○ ";
+
+      return React.createElement(
+        Box,
+        { key: index, paddingX: 1 },
+        React.createElement(
+          Text,
+          {
+            color,
+            bold: isHighlighted,
+            dimColor: isDisabled,
+          },
+          prefix,
+          option.label
+        )
+      );
+    })
+  );
+}

package/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from "./separator.js";
+export type { SeparatorProps } from "./separator.js";

package/components/separator/separator.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface SeparatorProps {
+  /** Separator width in characters (or "full" for full width) */
+  width?: number | "full";
+  /** Separator character */
+  char?: string;
+  /** Optional label to show in the middle */
+  label?: string;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Separator({
+  width = 40,
+  char = "─",
+  label,
+  tokens: propTokens,
+  orientation = "horizontal",
+}: SeparatorProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  if (orientation === "vertical") {
+    return React.createElement(Text, { color: tokens.colors.border }, "│");
+  }
+
+  const actualWidth = width === "full" ? 80 : width;
+
+  if (label) {
+    const labelLength = label.length + 2; // padding around label
+    const sideWidth = Math.floor((actualWidth - labelLength) / 2);
+    const leftLine = char.repeat(Math.max(0, sideWidth));
+    const rightLine = char.repeat(
+      Math.max(0, actualWidth - sideWidth - labelLength)
+    );
+
+    return React.createElement(
+      Box,
+      null,
+      React.createElement(Text, { color: tokens.colors.border }, leftLine),
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted },
+        " ",
+        label,
+        " "
+      ),
+      React.createElement(Text, { color: tokens.colors.border }, rightLine)
+    );
+  }
+
+  return React.createElement(
+    Text,
+    { color: tokens.colors.border },
+    char.repeat(actualWidth)
+  );
+}

package/components/sheet/index.ts

@@ -0,0 +1,2 @@
+export { Sheet } from "./sheet.js";
+export type { SheetProps, SheetSide } from "./sheet.js";