@hauktui/registry 0.0.1

package/components/color-picker/color-picker.tsx

@@ -0,0 +1,211 @@
+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 ColorPickerProps {
+  /** Current color value (hex) */
+  value: string;
+  /** Callback when color changes */
+  onChange?: (color: string) => void;
+  /** Preset colors */
+  presets?: string[];
+  /** Show color preview */
+  showPreview?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+// Default preset colors
+const DEFAULT_PRESETS = [
+  "#ff0000",
+  "#ff7700",
+  "#ffff00",
+  "#00ff00",
+  "#00ffff",
+  "#0000ff",
+  "#7700ff",
+  "#ff00ff",
+  "#ffffff",
+  "#888888",
+  "#000000",
+  "#ff5555",
+  "#ffaa55",
+  "#ffff55",
+  "#55ff55",
+  "#55ffff",
+  "#5555ff",
+  "#aa55ff",
+  "#ff55ff",
+  "#aaaaaa",
+];
+
+// Terminal color names
+const TERMINAL_COLORS: Record<string, string> = {
+  "#ff0000": "red",
+  "#00ff00": "green",
+  "#0000ff": "blue",
+  "#ffff00": "yellow",
+  "#ff00ff": "magenta",
+  "#00ffff": "cyan",
+  "#ffffff": "white",
+  "#000000": "black",
+};
+
+export function ColorPicker({
+  value,
+  onChange,
+  presets = DEFAULT_PRESETS,
+  showPreview = true,
+  tokens: propTokens,
+  focusId,
+}: ColorPickerProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("color-picker");
+  const { isFocused } = useFocusable(id);
+
+  const [selectedIndex, setSelectedIndex] = useState(() =>
+    Math.max(0, presets.indexOf(value))
+  );
+
+  // Grid dimensions
+  const cols = 5;
+  const rows = Math.ceil(presets.length / cols);
+
+  // Handle keyboard input
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      const currentRow = Math.floor(selectedIndex / cols);
+      const currentCol = selectedIndex % cols;
+
+      if (key.leftArrow || input === "h") {
+        if (currentCol > 0) {
+          setSelectedIndex((prev) => prev - 1);
+        }
+      } else if (key.rightArrow || input === "l") {
+        if (currentCol < cols - 1 && selectedIndex < presets.length - 1) {
+          setSelectedIndex((prev) => prev + 1);
+        }
+      } else if (key.upArrow || input === "k") {
+        if (currentRow > 0) {
+          setSelectedIndex((prev) => prev - cols);
+        }
+      } else if (key.downArrow || input === "j") {
+        const newIndex = selectedIndex + cols;
+        if (newIndex < presets.length) {
+          setSelectedIndex(newIndex);
+        }
+      } else if (key.return || input === " ") {
+        onChange?.(presets[selectedIndex]);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Render color swatch
+  const renderSwatch = (color: string, index: number) => {
+    const isSelected = color === value;
+    const isFocusedItem = isFocused && index === selectedIndex;
+
+    return React.createElement(
+      Text,
+      {
+        key: index,
+        backgroundColor: color,
+        color: getLuminance(color) > 0.5 ? "#000000" : "#ffffff",
+      },
+      isFocusedItem ? "[■]" : isSelected ? " ● " : "   "
+    );
+  };
+
+  // Calculate relative luminance
+  function getLuminance(hex: string): number {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return 0;
+    const [r, g, b] = rgb.map((c) => {
+      c = c / 255;
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+
+  // Convert hex to RGB
+  function hexToRgb(hex: string): number[] | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? [
+          parseInt(result[1], 16),
+          parseInt(result[2], 16),
+          parseInt(result[3], 16),
+        ]
+      : null;
+  }
+
+  // Build grid rows
+  const gridRows: React.ReactElement[] = [];
+  for (let row = 0; row < rows; row++) {
+    const rowColors = presets.slice(row * cols, (row + 1) * cols);
+    gridRows.push(
+      React.createElement(
+        Box,
+        { key: row },
+        rowColors.map((color, i) => renderSwatch(color, row * cols + i))
+      )
+    );
+  }
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      padding: 1,
+    },
+    // Title
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted, marginBottom: 1 },
+      "Color Picker"
+    ),
+    // Preview
+    showPreview &&
+      React.createElement(
+        Box,
+        { marginBottom: 1 },
+        React.createElement(
+          Text,
+          {
+            backgroundColor: value,
+            color: getLuminance(value) > 0.5 ? "#000000" : "#ffffff",
+          },
+          `  ${value}  `
+        ),
+        TERMINAL_COLORS[value.toLowerCase()] &&
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted },
+            ` (${TERMINAL_COLORS[value.toLowerCase()]})`
+          )
+      ),
+    // Color grid
+    React.createElement(Box, { flexDirection: "column" }, ...gridRows),
+    // Instructions
+    isFocused &&
+      React.createElement(
+        Box,
+        { marginTop: 1 },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "Arrow keys to move, Enter to select"
+        )
+      )
+  );
+}

package/components/color-picker/index.ts

@@ -0,0 +1,2 @@
+export { ColorPicker } from "./color-picker.js";
+export type { ColorPickerProps } from "./color-picker.js";

package/components/combobox/combobox.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useCallback, useMemo } 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 ComboboxOption {
+  /** Unique value */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+}
+
+export interface ComboboxProps {
+  /** Available options */
+  options: ComboboxOption[];
+  /** Controlled value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label text */
+  label?: string;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Maximum visible items */
+  maxItems?: number;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Allow creating new values */
+  allowCreate?: boolean;
+}
+
+export function Combobox({
+  options,
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  placeholder = "Search...",
+  label,
+  tokens: propTokens,
+  focusId,
+  maxItems = 5,
+  emptyMessage = "No results found.",
+  allowCreate = false,
+}: ComboboxProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("combobox");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [search, setSearch] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  // Filter options based on search
+  const filteredOptions = useMemo(() => {
+    if (!search.trim()) return options;
+    const lowerSearch = search.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(lowerSearch) ||
+        opt.value.toLowerCase().includes(lowerSearch) ||
+        opt.description?.toLowerCase().includes(lowerSearch)
+    );
+  }, [options, search]);
+
+  const visibleOptions = filteredOptions.slice(0, maxItems);
+
+  const handleSelect = useCallback(
+    (option: ComboboxOption) => {
+      if (option.disabled) return;
+      if (!isControlled) {
+        setInternalValue(option.value);
+      }
+      onChange?.(option.value);
+      setSearch("");
+      setIsOpen(false);
+    },
+    [isControlled, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.escape) {
+        if (isOpen) {
+          setIsOpen(false);
+          setSearch("");
+        }
+        return;
+      }
+
+      if (key.return) {
+        if (isOpen && visibleOptions[selectedIndex]) {
+          handleSelect(visibleOptions[selectedIndex]!);
+        } else if (!isOpen) {
+          setIsOpen(true);
+        } else if (
+          allowCreate &&
+          search.trim() &&
+          filteredOptions.length === 0
+        ) {
+          // Create new value
+          if (!isControlled) {
+            setInternalValue(search);
+          }
+          onChange?.(search);
+          setSearch("");
+          setIsOpen(false);
+        }
+        return;
+      }
+
+      if (key.upArrow || input === "k") {
+        if (isOpen) {
+          setSelectedIndex((prev) =>
+            clamp(prev - 1, 0, visibleOptions.length - 1)
+          );
+        }
+        return;
+      }
+
+      if (key.downArrow || input === "j") {
+        if (isOpen) {
+          setSelectedIndex((prev) =>
+            clamp(prev + 1, 0, visibleOptions.length - 1)
+          );
+        } else {
+          setIsOpen(true);
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setSearch((prev) => prev.slice(0, -1));
+        setIsOpen(true);
+        setSelectedIndex(0);
+        return;
+      }
+
+      // Regular character input
+      if (input && input.length === 1 && !key.ctrl && !key.meta) {
+        setSearch((prev) => prev + input);
+        setIsOpen(true);
+        setSelectedIndex(0);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const selectedOption = options.find((opt) => opt.value === currentValue);
+  const displayValue = search || selectedOption?.label || "";
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    // Label
+    label
+      ? React.createElement(
+          Box,
+          { marginBottom: 0 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.fg, bold: true },
+            label
+          )
+        )
+      : null,
+    // Input box
+    React.createElement(
+      Box,
+      {
+        borderStyle: "round",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        paddingX: 1,
+        width: 30,
+      },
+      React.createElement(
+        Text,
+        { color: displayValue ? tokens.colors.fg : tokens.colors.muted },
+        displayValue || placeholder
+      ),
+      React.createElement(
+        Box,
+        { flexGrow: 1, justifyContent: "flex-end" },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted },
+          isOpen ? "▲" : "▼"
+        )
+      )
+    ),
+    // Dropdown
+    isOpen
+      ? React.createElement(
+          Box,
+          {
+            flexDirection: "column",
+            borderStyle: "single",
+            borderColor: tokens.colors.border,
+            borderTop: false,
+            width: 30,
+            paddingY: 0,
+          },
+          visibleOptions.length > 0
+            ? visibleOptions.map((option, index) => {
+                const isSelected = index === selectedIndex;
+                return React.createElement(
+                  Box,
+                  { key: option.value, paddingX: 1, gap: 1 },
+                  React.createElement(
+                    Text,
+                    {
+                      color: isSelected
+                        ? tokens.colors.accent
+                        : tokens.colors.muted,
+                    },
+                    isSelected ? "▸" : " "
+                  ),
+                  React.createElement(
+                    Box,
+                    { flexDirection: "column" },
+                    React.createElement(
+                      Text,
+                      {
+                        color: option.disabled
+                          ? tokens.colors.muted
+                          : isSelected
+                            ? tokens.colors.fg
+                            : tokens.colors.fg,
+                        dimColor: option.disabled,
+                        bold: isSelected,
+                      },
+                      option.label
+                    ),
+                    option.description
+                      ? React.createElement(
+                          Text,
+                          { color: tokens.colors.muted, dimColor: true },
+                          option.description
+                        )
+                      : null
+                  )
+                );
+              })
+            : React.createElement(
+                Box,
+                { paddingX: 1 },
+                React.createElement(
+                  Text,
+                  { color: tokens.colors.muted, dimColor: true },
+                  allowCreate && search.trim()
+                    ? `Press Enter to create "${search}"`
+                    : emptyMessage
+                )
+              )
+        )
+      : null
+  );
+}

package/components/combobox/index.ts

@@ -0,0 +1,2 @@
+export { Combobox } from "./combobox.js";
+export type { ComboboxProps, ComboboxOption } from "./combobox.js";