@hauktui/registry 0.0.1

package/components/sheet/sheet.tsx

@@ -0,0 +1,137 @@
+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 type SheetSide = "left" | "right" | "top" | "bottom";
+
+export interface SheetProps {
+  /** Whether the sheet is open */
+  open: boolean;
+  /** Callback when sheet should close */
+  onClose: () => void;
+  /** Content of the sheet */
+  children: React.ReactNode;
+  /** Side to open from */
+  side?: SheetSide;
+  /** Sheet title */
+  title?: string;
+  /** Sheet description */
+  description?: string;
+  /** Sheet width (for left/right) or height (for top/bottom) */
+  size?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Whether to show overlay effect */
+  overlay?: boolean;
+}
+
+export function Sheet({
+  open,
+  onClose,
+  children,
+  side = "right",
+  title,
+  description,
+  size = 50,
+  tokens: propTokens,
+  focusId,
+  overlay = true,
+}: SheetProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("sheet");
+  const { isFocused } = useFocusable(id);
+
+  useInput(
+    (input, key) => {
+      if (!open) return;
+      if (key.escape || input === "q") {
+        onClose();
+      }
+    },
+    { isActive: open && isFocused }
+  );
+
+  if (!open) return null;
+
+  const isHorizontal = side === "left" || side === "right";
+
+  const sheetContent = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      width: isHorizontal ? size : "100%",
+      height: isHorizontal ? "100%" : size,
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      backgroundColor: tokens.colors.bg,
+      paddingX: 2,
+      paddingY: 1,
+    },
+    // Header
+    title || description
+      ? React.createElement(
+          Box,
+          { flexDirection: "column", marginBottom: 1 },
+          title
+            ? React.createElement(
+                Text,
+                { bold: true, color: tokens.colors.fg },
+                title
+              )
+            : null,
+          description
+            ? React.createElement(
+                Text,
+                { color: tokens.colors.muted, dimColor: true },
+                description
+              )
+            : null
+        )
+      : null,
+    // Separator
+    title || description
+      ? React.createElement(
+          Box,
+          { marginBottom: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.border },
+            "─".repeat(size - 6)
+          )
+        )
+      : null,
+    // Content
+    React.createElement(
+      Box,
+      { flexDirection: "column", flexGrow: 1 },
+      children
+    ),
+    // Footer
+    React.createElement(
+      Box,
+      { marginTop: 1, justifyContent: "space-between" },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        "ESC to close"
+      )
+    )
+  );
+
+  const containerProps: Record<string, unknown> = {
+    flexDirection: isHorizontal ? "row" : "column",
+    width: "100%",
+    height: "100%",
+  };
+
+  if (side === "right" || side === "bottom") {
+    containerProps.justifyContent = "flex-end";
+  }
+
+  return React.createElement(Box, containerProps, sheetContent);
+}

package/components/sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./sidebar.js";
+export type { SidebarProps, SidebarItem } from "./sidebar.js";

package/components/sidebar/sidebar.tsx

@@ -0,0 +1,225 @@
+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 SidebarItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional icon */
+  icon?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Child items for nested navigation */
+  children?: SidebarItem[];
+  /** Whether this is a section header */
+  section?: boolean;
+}
+
+export interface SidebarProps {
+  /** Navigation items */
+  items: SidebarItem[];
+  /** Selected item ID */
+  value?: string;
+  /** Callback when selection changes */
+  onChange?: (id: string) => void;
+  /** Sidebar title/header */
+  title?: string;
+  /** Sidebar width */
+  width?: number;
+  /** Whether the sidebar is collapsed */
+  collapsed?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Footer content */
+  footer?: React.ReactNode;
+}
+
+export function Sidebar({
+  items,
+  value,
+  onChange,
+  title,
+  width = 25,
+  collapsed = false,
+  tokens: propTokens,
+  focusId,
+  footer,
+}: SidebarProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("sidebar");
+  const { isFocused } = useFocusable(id);
+
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+
+  // Flatten items for navigation
+  const flatItems = items.reduce<SidebarItem[]>((acc, item) => {
+    if (!item.section && !item.disabled) {
+      acc.push(item);
+    }
+    if (item.children) {
+      acc.push(...item.children.filter((c) => !c.disabled));
+    }
+    return acc;
+  }, []);
+
+  const handleSelect = useCallback(
+    (item: SidebarItem) => {
+      if (item.disabled || item.section) return;
+      onChange?.(item.id);
+    },
+    [onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.upArrow || input === "k") {
+        setHighlightedIndex((prev) => clamp(prev - 1, 0, flatItems.length - 1));
+      } else if (key.downArrow || input === "j") {
+        setHighlightedIndex((prev) => clamp(prev + 1, 0, flatItems.length - 1));
+      } else if (key.return) {
+        const item = flatItems[highlightedIndex];
+        if (item) handleSelect(item);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  if (collapsed) {
+    return React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        width: 4,
+        borderStyle: "single",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        borderLeft: false,
+        borderTop: false,
+        borderBottom: false,
+        paddingY: 1,
+      },
+      items.map((item) =>
+        item.section
+          ? null
+          : React.createElement(
+              Box,
+              { key: item.id, justifyContent: "center" },
+              React.createElement(
+                Text,
+                {
+                  color:
+                    value === item.id
+                      ? tokens.colors.accent
+                      : tokens.colors.muted,
+                },
+                item.icon || item.label.charAt(0)
+              )
+            )
+      )
+    );
+  }
+
+  let flatIndex = 0;
+  const renderItem = (
+    item: SidebarItem,
+    depth = 0
+  ): React.ReactElement | null => {
+    if (item.section) {
+      return React.createElement(
+        Box,
+        { key: item.id, marginTop: depth === 0 ? 1 : 0, paddingX: 1 },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, bold: true, dimColor: true },
+          item.label.toUpperCase()
+        )
+      );
+    }
+
+    const currentIndex = flatIndex;
+    flatIndex++;
+    const isHighlighted = currentIndex === highlightedIndex;
+    const isSelected = value === item.id;
+
+    return React.createElement(
+      Box,
+      { key: item.id, flexDirection: "column" },
+      React.createElement(
+        Box,
+        { paddingX: 1, paddingLeft: 1 + depth * 2, gap: 1 },
+        React.createElement(
+          Text,
+          {
+            color: isHighlighted ? tokens.colors.accent : tokens.colors.muted,
+          },
+          isHighlighted ? "▸" : " "
+        ),
+        item.icon ? React.createElement(Text, null, item.icon) : null,
+        React.createElement(
+          Text,
+          {
+            color: item.disabled
+              ? tokens.colors.muted
+              : isSelected
+                ? tokens.colors.accent
+                : tokens.colors.fg,
+            dimColor: item.disabled,
+            bold: isSelected,
+          },
+          item.label
+        )
+      ),
+      item.children
+        ? React.createElement(
+            Box,
+            { flexDirection: "column" },
+            ...item.children.map((child) => renderItem(child, depth + 1))
+          )
+        : null
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      width,
+      borderStyle: "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      borderLeft: false,
+      borderTop: false,
+      borderBottom: false,
+      paddingY: 1,
+    },
+    // Title
+    title
+      ? React.createElement(
+          Box,
+          { paddingX: 1, marginBottom: 1 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        )
+      : null,
+    // Items
+    ...items.map((item) => renderItem(item)),
+    // Footer
+    footer
+      ? React.createElement(
+          Box,
+          { marginTop: 1, paddingX: 1, flexGrow: 1, alignItems: "flex-end" },
+          footer
+        )
+      : null
+  );
+}

package/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./skeleton.js";
+export type { SkeletonProps } from "./skeleton.js";

package/components/skeleton/skeleton.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface SkeletonProps {
+  /** Width of the skeleton in characters */
+  width?: number;
+  /** Height (number of lines) */
+  height?: number;
+  /** Skeleton variant */
+  variant?: "text" | "circular" | "rectangular";
+  /** Whether to animate */
+  animate?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Skeleton({
+  width = 20,
+  height = 1,
+  variant = "text",
+  animate = true,
+  tokens: propTokens,
+}: SkeletonProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    if (!animate) return;
+    const timer = setInterval(() => {
+      setPhase((p) => (p + 1) % 3);
+    }, 500);
+    return () => clearInterval(timer);
+  }, [animate]);
+
+  const chars = ["░", "▒", "▓"];
+  const char = animate ? chars[phase] : "░";
+
+  if (variant === "circular") {
+    return React.createElement(
+      Text,
+      { color: tokens.colors.border },
+      "(",
+      char!.repeat(Math.max(1, width - 2)),
+      ")"
+    );
+  }
+
+  const lines = Array.from({ length: height }, (_, i) => i);
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    lines.map((lineIndex) =>
+      React.createElement(
+        Text,
+        { key: lineIndex, color: tokens.colors.border },
+        char!.repeat(width)
+      )
+    )
+  );
+}

package/components/slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./slider.js";
+export type { SliderProps } from "./slider.js";

package/components/slider/slider.tsx

@@ -0,0 +1,128 @@
+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 SliderProps {
+  /** Current value */
+  value: number;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Callback when value changes */
+  onChange: (value: number) => void;
+  /** Slider width in characters */
+  width?: number;
+  /** Whether the slider is disabled */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Show value label */
+  showValue?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Slider({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  width = 20,
+  disabled = false,
+  label,
+  showValue = true,
+  tokens: propTokens,
+  focusId,
+}: SliderProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("slider");
+  const { isFocused } = useFocusable(id);
+
+  const updateValue = useCallback(
+    (delta: number) => {
+      const newValue = clamp(value + delta, min, max);
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    },
+    [value, min, max, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.leftArrow || input === "h") {
+        updateValue(-step);
+      } else if (key.rightArrow || input === "l") {
+        updateValue(step);
+      } else if (input === "0") {
+        onChange(min);
+      } else if (input === "$") {
+        onChange(max);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Calculate filled portion
+  const percentage = ((value - min) / (max - min)) * 100;
+  const filled = Math.round((percentage / 100) * width);
+  const empty = width - filled;
+
+  // Create slider track
+  const track = "█".repeat(filled) + "░".repeat(empty);
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    label
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.fg, bold: true },
+          label
+        )
+      : null,
+    React.createElement(
+      Box,
+      {
+        gap: 1,
+        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 : tokens.colors.accent },
+        track
+      ),
+      showValue
+        ? React.createElement(
+            Text,
+            { color: tokens.colors.muted },
+            `${value}/${max}`
+          )
+        : null
+    ),
+    isFocused
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "←/→ to adjust, 0/$ for min/max"
+        )
+      : null
+  );
+}

package/components/spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from "./spinner.js";
+export type { SpinnerProps, SpinnerVariant } from "./spinner.js";

package/components/spinner/spinner.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export type SpinnerVariant = "dots" | "line" | "arc" | "circle" | "bounce";
+
+export interface SpinnerProps {
+  /** Loading text to display */
+  label?: string;
+  /** Spinner variant */
+  variant?: SpinnerVariant;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Spin speed in milliseconds */
+  speed?: number;
+}
+
+const SPINNERS: Record<SpinnerVariant, string[]> = {
+  dots: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+  line: ["-", "\\", "|", "/"],
+  arc: ["◜", "◠", "◝", "◞", "◡", "◟"],
+  circle: ["◐", "◓", "◑", "◒"],
+  bounce: ["⠁", "⠂", "⠄", "⠂"],
+};
+
+export function Spinner({
+  label,
+  variant = "dots",
+  tokens: propTokens,
+  speed = 80,
+}: SpinnerProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const frames = SPINNERS[variant];
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrameIndex((prev) => (prev + 1) % frames.length);
+    }, speed);
+    return () => clearInterval(timer);
+  }, [frames.length, speed]);
+
+  return React.createElement(
+    Text,
+    null,
+    React.createElement(
+      Text,
+      { color: tokens.colors.accent },
+      frames[frameIndex]
+    ),
+    label
+      ? React.createElement(Text, { color: tokens.colors.fg }, " ", label)
+      : null
+  );
+}

package/components/stat/index.ts

@@ -0,0 +1,2 @@
+export { Stat, StatGroup } from "./stat.js";
+export type { StatProps, StatGroupProps } from "./stat.js";