@hauktui/registry 0.0.1

package/components/accordion/accordion.tsx

@@ -0,0 +1,146 @@
+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 AccordionItem {
+  /** Unique key for the item */
+  key: string;
+  /** Item title */
+  title: string;
+  /** Item content */
+  content: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  /** Accordion items */
+  items: AccordionItem[];
+  /** Allow multiple items to be expanded */
+  multiple?: boolean;
+  /** Controlled expanded keys */
+  expandedKeys?: string[];
+  /** Default expanded keys for uncontrolled mode */
+  defaultExpandedKeys?: string[];
+  /** Callback when expansion changes */
+  onChange?: (keys: string[]) => void;
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Accordion({
+  items,
+  multiple = false,
+  expandedKeys: controlledExpandedKeys,
+  defaultExpandedKeys = [],
+  onChange,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+}: AccordionProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("accordion");
+  const { isFocused } = useFocusable(id);
+
+  const [internalExpandedKeys, setInternalExpandedKeys] =
+    useState<string[]>(defaultExpandedKeys);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+
+  const isControlled = controlledExpandedKeys !== undefined;
+  const expandedKeys = isControlled
+    ? controlledExpandedKeys
+    : internalExpandedKeys;
+
+  const toggleItem = useCallback(
+    (key: string) => {
+      const item = items.find((i) => i.key === key);
+      if (!item || item.disabled) return;
+
+      let newKeys: string[];
+      if (expandedKeys.includes(key)) {
+        newKeys = expandedKeys.filter((k) => k !== key);
+      } else {
+        newKeys = multiple ? [...expandedKeys, key] : [key];
+      }
+
+      if (!isControlled) {
+        setInternalExpandedKeys(newKeys);
+      }
+      onChange?.(newKeys);
+    },
+    [items, expandedKeys, multiple, isControlled, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.upArrow || input === "k") {
+        setHighlightedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow || input === "j") {
+        setHighlightedIndex((prev) => Math.min(items.length - 1, prev + 1));
+      } else if (key.return || input === " ") {
+        const item = items[highlightedIndex];
+        if (item) {
+          toggleItem(item.key);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    items.map((item, index) => {
+      const isExpanded = expandedKeys.includes(item.key);
+      const isHighlighted = index === highlightedIndex && isFocused;
+      const isDisabled = item.disabled || disabled;
+
+      const icon = isExpanded ? "▼" : "▶";
+
+      return React.createElement(
+        Box,
+        { key: item.key, flexDirection: "column", paddingX: 1 },
+        React.createElement(
+          Text,
+          {
+            color: isDisabled
+              ? tokens.colors.disabled
+              : isHighlighted
+                ? tokens.colors.accent
+                : tokens.colors.fg,
+            bold: isHighlighted,
+            inverse: isHighlighted,
+            dimColor: isDisabled,
+          },
+          icon,
+          " ",
+          item.title
+        ),
+        isExpanded
+          ? React.createElement(
+              Box,
+              { paddingLeft: 2, paddingY: 0 },
+              React.createElement(
+                Text,
+                { color: tokens.colors.muted },
+                item.content
+              )
+            )
+          : null
+      );
+    })
+  );
+}

package/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from "./accordion.js";
+export type { AccordionProps, AccordionItem } from "./accordion.js";

package/components/alert/alert.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+export interface AlertProps {
+  /** Alert message content */
+  children: React.ReactNode;
+  /** Alert title */
+  title?: string;
+  /** Alert variant */
+  variant?: AlertVariant;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Whether to show an icon */
+  showIcon?: boolean;
+}
+
+const ICONS: Record<AlertVariant, string> = {
+  info: "ℹ",
+  success: "✓",
+  warning: "⚠",
+  error: "✗",
+};
+
+export function Alert({
+  children,
+  title,
+  variant = "info",
+  tokens: propTokens,
+  showIcon = true,
+}: AlertProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const variantColors: Record<AlertVariant, string> = {
+    info: tokens.colors.accent,
+    success: tokens.colors.success,
+    warning: tokens.colors.warning,
+    error: tokens.colors.danger,
+  };
+
+  const color = variantColors[variant];
+  const icon = ICONS[variant];
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: color,
+      paddingX: 1,
+      paddingY: 0,
+    },
+    React.createElement(
+      Box,
+      { gap: 1 },
+      showIcon ? React.createElement(Text, { color }, icon) : null,
+      title ? React.createElement(Text, { color, bold: true }, title) : null
+    ),
+    React.createElement(
+      Box,
+      { paddingLeft: showIcon ? 2 : 0 },
+      React.createElement(Text, { color: tokens.colors.fg }, children)
+    )
+  );
+}

package/components/alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from "./alert.js";
+export type { AlertProps, AlertVariant } from "./alert.js";

package/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,185 @@
+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 AlertDialogVariant = "default" | "destructive";
+
+export interface AlertDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when dialog should close */
+  onClose: () => void;
+  /** Dialog title */
+  title: string;
+  /** Dialog description/message */
+  description: string;
+  /** Confirm button label */
+  confirmLabel?: string;
+  /** Cancel button label */
+  cancelLabel?: string;
+  /** Callback when confirmed */
+  onConfirm: () => void;
+  /** Callback when cancelled */
+  onCancel?: () => void;
+  /** Dialog variant */
+  variant?: AlertDialogVariant;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function AlertDialog({
+  open,
+  onClose,
+  title,
+  description,
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  tokens: propTokens,
+  focusId,
+}: AlertDialogProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("alert-dialog");
+  const { isFocused } = useFocusable(id);
+
+  const [focused, setFocused] = React.useState<"cancel" | "confirm">("cancel");
+
+  useInput(
+    (input, key) => {
+      if (!open) return;
+
+      if (key.escape) {
+        onCancel?.();
+        onClose();
+        return;
+      }
+
+      if (key.leftArrow || input === "h") {
+        setFocused("cancel");
+      } else if (key.rightArrow || input === "l") {
+        setFocused("confirm");
+      } else if (key.tab) {
+        setFocused((prev) => (prev === "cancel" ? "confirm" : "cancel"));
+      } else if (key.return) {
+        if (focused === "confirm") {
+          onConfirm();
+          onClose();
+        } else {
+          onCancel?.();
+          onClose();
+        }
+      } else if (input === "y" || input === "Y") {
+        onConfirm();
+        onClose();
+      } else if (input === "n" || input === "N") {
+        onCancel?.();
+        onClose();
+      }
+    },
+    { isActive: open && isFocused }
+  );
+
+  if (!open) return null;
+
+  const confirmColor =
+    variant === "destructive" ? tokens.colors.danger : tokens.colors.accent;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor:
+        variant === "destructive" ? tokens.colors.danger : tokens.colors.border,
+      paddingX: 2,
+      paddingY: 1,
+      width: 50,
+    },
+    // Icon + Title
+    React.createElement(
+      Box,
+      { gap: 1, marginBottom: 1 },
+      React.createElement(
+        Text,
+        {
+          color:
+            variant === "destructive"
+              ? tokens.colors.danger
+              : tokens.colors.warning,
+        },
+        variant === "destructive" ? "⚠" : "ℹ"
+      ),
+      React.createElement(Text, { bold: true, color: tokens.colors.fg }, title)
+    ),
+    // Description
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { color: tokens.colors.muted }, description)
+    ),
+    // Separator
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { color: tokens.colors.border }, "─".repeat(46))
+    ),
+    // Buttons
+    React.createElement(
+      Box,
+      { gap: 2, justifyContent: "flex-end" },
+      // Cancel button
+      React.createElement(
+        Box,
+        {
+          borderStyle: focused === "cancel" ? "round" : "single",
+          borderColor:
+            focused === "cancel" ? tokens.colors.focus : tokens.colors.border,
+          paddingX: 2,
+        },
+        React.createElement(
+          Text,
+          {
+            color:
+              focused === "cancel" ? tokens.colors.fg : tokens.colors.muted,
+          },
+          cancelLabel
+        )
+      ),
+      // Confirm button
+      React.createElement(
+        Box,
+        {
+          borderStyle: focused === "confirm" ? "round" : "single",
+          borderColor:
+            focused === "confirm" ? confirmColor : tokens.colors.border,
+          paddingX: 2,
+        },
+        React.createElement(
+          Text,
+          {
+            color: focused === "confirm" ? confirmColor : tokens.colors.muted,
+            bold: focused === "confirm",
+          },
+          confirmLabel
+        )
+      )
+    ),
+    // Hint
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        "Y/N to respond • Tab to switch • Enter to confirm"
+      )
+    )
+  );
+}

package/components/alert-dialog/index.ts

@@ -0,0 +1,2 @@
+export { AlertDialog } from "./alert-dialog.js";
+export type { AlertDialogProps, AlertDialogVariant } from "./alert-dialog.js";

package/components/avatar/avatar.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface AvatarProps {
+  /** Name to generate initials from */
+  name?: string;
+  /** Fallback character when no name is provided */
+  fallback?: string;
+  /** Size of the avatar */
+  size?: "sm" | "md" | "lg";
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0]!.charAt(0).toUpperCase();
+  }
+  return (
+    parts[0]!.charAt(0) + parts[parts.length - 1]!.charAt(0)
+  ).toUpperCase();
+}
+
+export function Avatar({
+  name,
+  fallback = "?",
+  size = "md",
+  tokens: propTokens,
+}: AvatarProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const initials = name ? getInitials(name) : fallback;
+
+  const sizeConfig = {
+    sm: { padding: "" },
+    md: { padding: " " },
+    lg: { padding: "  " },
+  };
+
+  const config = sizeConfig[size];
+
+  return React.createElement(
+    Text,
+    {
+      backgroundColor: tokens.colors.accent,
+      color: tokens.colors.bg,
+      bold: true,
+    },
+    config.padding,
+    initials,
+    config.padding
+  );
+}

package/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from "./avatar.js";
+export type { AvatarProps } from "./avatar.js";

package/components/avatar-group/avatar-group.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface AvatarGroupProps {
+  /** Avatar names or initials */
+  avatars: string[];
+  /** Maximum avatars to show */
+  max?: number;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Stacking direction */
+  direction?: "left" | "right";
+}
+
+// Color palette for avatars
+const AVATAR_COLORS = [
+  "#e91e63",
+  "#9c27b0",
+  "#673ab7",
+  "#3f51b5",
+  "#2196f3",
+  "#03a9f4",
+  "#00bcd4",
+  "#009688",
+  "#4caf50",
+  "#8bc34a",
+  "#cddc39",
+  "#ffeb3b",
+  "#ffc107",
+  "#ff9800",
+  "#ff5722",
+];
+
+export function AvatarGroup({
+  avatars,
+  max = 5,
+  size = "md",
+  tokens: propTokens,
+  direction = "right",
+}: AvatarGroupProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  // Get avatar dimensions based on size
+  const getDimensions = () => {
+    switch (size) {
+      case "sm":
+        return { width: 3, chars: 1 };
+      case "lg":
+        return { width: 5, chars: 2 };
+      default:
+        return { width: 4, chars: 2 };
+    }
+  };
+
+  const dims = getDimensions();
+
+  // Get initials from name
+  const getInitials = (name: string): string => {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+      return parts[0].substring(0, dims.chars).toUpperCase();
+    }
+    return parts
+      .slice(0, dims.chars)
+      .map((p) => p[0])
+      .join("")
+      .toUpperCase();
+  };
+
+  // Get color for name (deterministic based on name)
+  const getColor = (name: string): string => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+  };
+
+  // Avatars to display
+  const displayAvatars = avatars.slice(0, max);
+  const remaining = avatars.length - max;
+
+  // Render single avatar
+  const renderAvatar = (name: string, index: number) => {
+    const initials = getInitials(name);
+    const bgColor = getColor(name);
+    const padding = " ".repeat(Math.floor((dims.width - initials.length) / 2));
+
+    return React.createElement(
+      Box,
+      {
+        key: index,
+        marginLeft: index > 0 ? -1 : 0,
+      },
+      React.createElement(
+        Text,
+        {
+          backgroundColor: bgColor,
+          color: "#ffffff",
+          bold: true,
+        },
+        `${padding}${initials}${padding}`
+      )
+    );
+  };
+
+  // Render overflow indicator
+  const renderOverflow = () => {
+    if (remaining <= 0) return null;
+
+    const text = `+${remaining}`;
+    const padding = " ".repeat(
+      Math.max(0, Math.floor((dims.width - text.length) / 2))
+    );
+
+    return React.createElement(
+      Box,
+      { marginLeft: -1 },
+      React.createElement(
+        Text,
+        {
+          backgroundColor: tokens.colors.border,
+          color: tokens.colors.fg,
+        },
+        `${padding}${text}${padding}`
+      )
+    );
+  };
+
+  const avatarElements =
+    direction === "right" ? displayAvatars : displayAvatars.reverse();
+
+  return React.createElement(
+    Box,
+    { flexDirection: "row" },
+    avatarElements.map(renderAvatar),
+    renderOverflow()
+  );
+}

package/components/avatar-group/index.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup } from "./avatar-group.js";
+export type { AvatarGroupProps } from "./avatar-group.js";

package/components/badge/badge.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export type BadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "muted";
+
+export interface BadgeProps {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Badge variant */
+  variant?: BadgeVariant;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Badge({
+  children,
+  variant = "default",
+  tokens: propTokens,
+}: BadgeProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const variantColors: Record<BadgeVariant, { bg: string; fg: string }> = {
+    default: { bg: tokens.colors.border, fg: tokens.colors.fg },
+    primary: { bg: tokens.colors.accent, fg: tokens.colors.bg },
+    success: { bg: tokens.colors.success, fg: tokens.colors.bg },
+    warning: { bg: tokens.colors.warning, fg: tokens.colors.bg },
+    danger: { bg: tokens.colors.danger, fg: tokens.colors.bg },
+    muted: { bg: tokens.colors.muted, fg: tokens.colors.bg },
+  };
+
+  const colors = variantColors[variant];
+
+  return React.createElement(
+    Text,
+    {
+      backgroundColor: colors.bg,
+      color: colors.fg,
+    },
+    " ",
+    children,
+    " "
+  );
+}

package/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.js";
+export type { BadgeProps, BadgeVariant } from "./badge.js";