@hauktui/registry 0.0.1

package/components/dialog/dialog.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable, FocusGroup } from "@hauktui/primitives-ink";
+import { stableId } from "@hauktui/core";
+
+export interface DialogProps {
+  /** Dialog title */
+  title: string;
+  /** Dialog description/content */
+  children: React.ReactNode;
+  /** Whether the dialog is open */
+  open?: boolean;
+  /** Callback when dialog should close */
+  onClose?: () => void;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Dialog width */
+  width?: number;
+  /** Show close hint */
+  showCloseHint?: boolean;
+}
+
+export function Dialog({
+  title,
+  children,
+  open = true,
+  onClose,
+  tokens: propTokens,
+  focusId,
+  width = 50,
+  showCloseHint = true,
+}: DialogProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("dialog");
+  const { isFocused } = useFocusable(id);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+      if (key.escape || input === "q") {
+        onClose?.();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  if (!open) return null;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+      paddingY: 0,
+      width,
+    },
+    // Title
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { color: tokens.colors.fg, bold: true }, title)
+    ),
+    // Content
+    React.createElement(Box, { flexDirection: "column" }, children),
+    // Close hint
+    showCloseHint
+      ? React.createElement(
+          Box,
+          { marginTop: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            "Press ESC or Q to close"
+          )
+        )
+      : null
+  );
+}

package/components/dialog/index.ts

@@ -0,0 +1,2 @@
+export { Dialog } from "./dialog.js";
+export type { DialogProps } from "./dialog.js";

package/components/drawer/drawer.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect } 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 DrawerSide = "left" | "right" | "top" | "bottom";
+
+export interface DrawerProps {
+  /** Whether the drawer is open */
+  open: boolean;
+  /** Callback when drawer should close */
+  onClose: () => void;
+  /** Content of the drawer */
+  children: React.ReactNode;
+  /** Side to open from */
+  side?: DrawerSide;
+  /** Drawer title */
+  title?: string;
+  /** Drawer width (for left/right) or height (for top/bottom) */
+  size?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Show close button hint */
+  showCloseHint?: boolean;
+}
+
+export function Drawer({
+  open,
+  onClose,
+  children,
+  side = "right",
+  title,
+  size = 40,
+  tokens: propTokens,
+  focusId,
+  showCloseHint = true,
+}: DrawerProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("drawer");
+  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 borderStyle = {
+    left: {
+      borderRight: true,
+      borderLeft: false,
+      borderTop: false,
+      borderBottom: false,
+    },
+    right: {
+      borderLeft: true,
+      borderRight: false,
+      borderTop: false,
+      borderBottom: false,
+    },
+    top: {
+      borderBottom: true,
+      borderTop: false,
+      borderLeft: false,
+      borderRight: false,
+    },
+    bottom: {
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+    },
+  }[side];
+
+  const drawerContent = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      width: isHorizontal ? size : "100%",
+      height: isHorizontal ? "100%" : size,
+      borderStyle: "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      ...borderStyle,
+      paddingX: 1,
+      paddingY: 1,
+    },
+    // Header
+    title
+      ? React.createElement(
+          Box,
+          { marginBottom: 1 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        )
+      : null,
+    // Content
+    React.createElement(
+      Box,
+      { flexDirection: "column", flexGrow: 1 },
+      children
+    ),
+    // Close hint
+    showCloseHint
+      ? React.createElement(
+          Box,
+          { marginTop: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            "Press ESC or Q to close"
+          )
+        )
+      : null
+  );
+
+  // Position the drawer based on side
+  const containerProps: Record<string, unknown> = {
+    flexDirection: isHorizontal ? "row" : "column",
+  };
+
+  if (side === "right" || side === "bottom") {
+    containerProps.justifyContent = "flex-end";
+  }
+
+  return React.createElement(Box, containerProps, drawerContent);
+}

package/components/drawer/index.ts

@@ -0,0 +1,2 @@
+export { Drawer } from "./drawer.js";
+export type { DrawerProps, DrawerSide } from "./drawer.js";

package/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,188 @@
+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 DropdownMenuItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Optional keyboard shortcut */
+  shortcut?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Whether this is a separator */
+  separator?: boolean;
+  /** Optional icon/prefix */
+  icon?: string;
+}
+
+export interface DropdownMenuProps {
+  /** Menu items */
+  items: DropdownMenuItem[];
+  /** Whether the menu is open */
+  open: boolean;
+  /** Callback when menu should close */
+  onClose: () => void;
+  /** Callback when an item is selected */
+  onSelect: (item: DropdownMenuItem) => void;
+  /** Menu title/trigger label */
+  trigger?: string;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Menu width */
+  width?: number;
+}
+
+export function DropdownMenu({
+  items,
+  open,
+  onClose,
+  onSelect,
+  trigger,
+  tokens: propTokens,
+  focusId,
+  width = 30,
+}: DropdownMenuProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("dropdown-menu");
+  const { isFocused } = useFocusable(id);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectableItems = items.filter(
+    (item) => !item.separator && !item.disabled
+  );
+
+  const handleSelect = useCallback(() => {
+    const item = selectableItems[selectedIndex];
+    if (item && !item.disabled) {
+      onSelect(item);
+      onClose();
+    }
+  }, [selectableItems, selectedIndex, onSelect, onClose]);
+
+  useInput(
+    (input, key) => {
+      if (!open || !isFocused) return;
+
+      if (key.escape || input === "q") {
+        onClose();
+        return;
+      }
+
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((prev) =>
+          clamp(prev - 1, 0, selectableItems.length - 1)
+        );
+      } else if (key.downArrow || input === "j") {
+        setSelectedIndex((prev) =>
+          clamp(prev + 1, 0, selectableItems.length - 1)
+        );
+      } else if (key.return) {
+        handleSelect();
+      }
+    },
+    { isActive: open && isFocused }
+  );
+
+  const triggerElement = trigger
+    ? React.createElement(
+        Box,
+        { marginBottom: open ? 0 : 0 },
+        React.createElement(
+          Text,
+          { color: isFocused ? tokens.colors.focus : tokens.colors.fg },
+          trigger,
+          " ",
+          open ? "▲" : "▼"
+        )
+      )
+    : null;
+
+  if (!open) {
+    return triggerElement || React.createElement(Box, null);
+  }
+
+  let selectableIndex = 0;
+  const menuItems = items.map((item, index) => {
+    if (item.separator) {
+      return React.createElement(
+        Box,
+        { key: `sep-${index}`, paddingX: 1 },
+        React.createElement(
+          Text,
+          { color: tokens.colors.border },
+          "─".repeat(width - 4)
+        )
+      );
+    }
+
+    const isSelected = selectableItems[selectedIndex]?.id === item.id;
+    const currentSelectableIndex = selectableIndex;
+    selectableIndex++;
+
+    return React.createElement(
+      Box,
+      {
+        key: item.id,
+        paddingX: 1,
+        gap: 1,
+      },
+      React.createElement(
+        Text,
+        { color: isSelected ? tokens.colors.accent : tokens.colors.muted },
+        isSelected ? "▸" : " "
+      ),
+      item.icon ? React.createElement(Text, null, item.icon) : null,
+      React.createElement(
+        Text,
+        {
+          color: item.disabled
+            ? tokens.colors.muted
+            : isSelected
+              ? tokens.colors.fg
+              : tokens.colors.fg,
+          dimColor: item.disabled,
+          bold: isSelected,
+        },
+        item.label
+      ),
+      item.shortcut
+        ? React.createElement(
+            Box,
+            { flexGrow: 1, justifyContent: "flex-end" },
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              item.shortcut
+            )
+          )
+        : null
+    );
+  });
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    triggerElement,
+    React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        width,
+        paddingY: 0,
+      },
+      ...menuItems
+    )
+  );
+}

package/components/dropdown-menu/index.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from "./dropdown-menu.js";
+export type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu.js";

package/components/empty/empty.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface EmptyProps {
+  /** Main title/message */
+  title?: string;
+  /** Description text */
+  description?: string;
+  /** Icon or emoji to display */
+  icon?: string;
+  /** Action element (e.g., button) */
+  action?: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+}
+
+const ICONS = {
+  empty: "📭",
+  search: "🔍",
+  error: "❌",
+  folder: "📁",
+  file: "📄",
+  inbox: "📥",
+};
+
+export function Empty({
+  title = "No data",
+  description,
+  icon = "📭",
+  action,
+  tokens: propTokens,
+  size = "md",
+}: EmptyProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const sizeConfig = {
+    sm: { iconSize: 1, padding: 1 },
+    md: { iconSize: 2, padding: 2 },
+    lg: { iconSize: 3, padding: 3 },
+  };
+
+  const config = sizeConfig[size];
+
+  // ASCII art versions for larger sizes
+  const asciiIcons: Record<string, string[]> = {
+    "📭": ["┌─────────┐", "│  EMPTY  │", "└────┬────┘", "     │     "],
+    "🔍": [" ╭───╮ ", " │   │╲", " ╰───╯ ╲"],
+    "❌": ["╲   ╱", " ╲ ╱ ", " ╱ ╲ ", "╱   ╲"],
+    "📁": ["┌──┬────┐", "│  └────┤", "│       │", "└───────┘"],
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: config.padding,
+    },
+    // Icon
+    size === "lg" && asciiIcons[icon]
+      ? React.createElement(
+          Box,
+          { flexDirection: "column", marginBottom: 1 },
+          asciiIcons[icon]!.map((line, i) =>
+            React.createElement(
+              Text,
+              { key: i, color: tokens.colors.muted },
+              line
+            )
+          )
+        )
+      : React.createElement(
+          Text,
+          { color: tokens.colors.muted },
+          icon.repeat(size === "md" ? 1 : 1)
+        ),
+    // Title
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.fg, bold: size !== "sm" },
+        title
+      )
+    ),
+    // Description
+    description
+      ? React.createElement(
+          Box,
+          { marginTop: size === "sm" ? 0 : 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            description
+          )
+        )
+      : null,
+    // Action
+    action ? React.createElement(Box, { marginTop: 1 }, action) : null
+  );
+}

package/components/empty/index.ts

@@ -0,0 +1,2 @@
+export { Empty } from "./empty.js";
+export type { EmptyProps } from "./empty.js";

package/components/field/field.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface FieldProps {
+  /** Field label */
+  label: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Error message */
+  error?: string;
+  /** Help text/description */
+  description?: string;
+  /** The input element */
+  children: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Label position */
+  labelPosition?: "top" | "left";
+  /** Label width (for left position) */
+  labelWidth?: number;
+}
+
+export function Field({
+  label,
+  required = false,
+  error,
+  description,
+  children,
+  tokens: propTokens,
+  labelPosition = "top",
+  labelWidth = 15,
+}: FieldProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const labelElement = React.createElement(
+    Box,
+    {
+      width: labelPosition === "left" ? labelWidth : undefined,
+      marginBottom: labelPosition === "top" ? 0 : 0,
+    },
+    React.createElement(Text, { color: tokens.colors.fg, bold: true }, label),
+    required
+      ? React.createElement(Text, { color: tokens.colors.danger }, " *")
+      : null
+  );
+
+  const inputElement = React.createElement(
+    Box,
+    { flexDirection: "column", flexGrow: 1 },
+    children,
+    // Description
+    description && !error
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          description
+        )
+      : null,
+    // Error
+    error
+      ? React.createElement(Text, { color: tokens.colors.danger }, "⚠ ", error)
+      : null
+  );
+
+  if (labelPosition === "left") {
+    return React.createElement(
+      Box,
+      { gap: 1, alignItems: "flex-start" },
+      labelElement,
+      inputElement
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", gap: 0 },
+    labelElement,
+    inputElement
+  );
+}

package/components/field/index.ts

@@ -0,0 +1,2 @@
+export { Field } from "./field.js";
+export type { FieldProps } from "./field.js";