@hauktui/registry 0.0.1

package/components/form/form.tsx

@@ -0,0 +1,202 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface FormState {
+  values: Record<string, unknown>;
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+}
+
+export interface FormContextValue {
+  values: Record<string, unknown>;
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  setValue: (name: string, value: unknown) => void;
+  setError: (name: string, error: string) => void;
+  setTouched: (name: string) => void;
+  handleSubmit: () => void;
+}
+
+const FormContext = createContext<FormContextValue | null>(null);
+
+export function useFormContext(): FormContextValue {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a Form");
+  }
+  return context;
+}
+
+export interface FormProps {
+  /** Initial form values */
+  defaultValues?: Record<string, unknown>;
+  /** Callback when form is submitted */
+  onSubmit?: (values: Record<string, unknown>) => void;
+  /** Validation function */
+  validate?: (values: Record<string, unknown>) => Record<string, string>;
+  /** Form children */
+  children: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Form({
+  defaultValues = {},
+  onSubmit,
+  validate,
+  children,
+  tokens: propTokens,
+}: FormProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const [values, setValues] = useState<Record<string, unknown>>(defaultValues);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouchedState] = useState<Record<string, boolean>>({});
+
+  const setValue = useCallback((name: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    // Clear error when value changes
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+
+  const setError = useCallback((name: string, error: string) => {
+    setErrors((prev) => ({ ...prev, [name]: error }));
+  }, []);
+
+  const setTouched = useCallback((name: string) => {
+    setTouchedState((prev) => ({ ...prev, [name]: true }));
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    // Validate if validator provided
+    if (validate) {
+      const validationErrors = validate(values);
+      if (Object.keys(validationErrors).length > 0) {
+        setErrors(validationErrors);
+        return;
+      }
+    }
+    onSubmit?.(values);
+  }, [values, validate, onSubmit]);
+
+  const contextValue: FormContextValue = {
+    values,
+    errors,
+    touched,
+    setValue,
+    setError,
+    setTouched,
+    handleSubmit,
+  };
+
+  return React.createElement(
+    FormContext.Provider,
+    { value: contextValue },
+    React.createElement(Box, { flexDirection: "column", gap: 1 }, children)
+  );
+}
+
+export interface FormFieldProps {
+  /** Field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Whether field is required */
+  required?: boolean;
+  /** Help text */
+  description?: string;
+  /** Field children (input component) */
+  children: React.ReactElement;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function FormField({
+  name,
+  label,
+  required,
+  description,
+  children,
+  tokens: propTokens,
+}: FormFieldProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const form = useFormContext();
+
+  const error = form.errors[name];
+  const isTouched = form.touched[name];
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    label
+      ? React.createElement(
+          Box,
+          { gap: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.fg, bold: true },
+            label
+          ),
+          required
+            ? React.createElement(Text, { color: tokens.colors.danger }, "*")
+            : null
+        )
+      : null,
+    description
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          description
+        )
+      : null,
+    children,
+    error && isTouched
+      ? React.createElement(Text, { color: tokens.colors.danger }, `✗ ${error}`)
+      : null
+  );
+}
+
+export interface FormMessageProps {
+  /** Message type */
+  type?: "error" | "success" | "info";
+  /** Message content */
+  children: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function FormMessage({
+  type = "error",
+  children,
+  tokens: propTokens,
+}: FormMessageProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const colors = {
+    error: tokens.colors.danger,
+    success: tokens.colors.success,
+    info: tokens.colors.accent,
+  };
+
+  const icons = {
+    error: "✗",
+    success: "✓",
+    info: "ℹ",
+  };
+
+  return React.createElement(
+    Box,
+    { gap: 1 },
+    React.createElement(Text, { color: colors[type] }, icons[type]),
+    React.createElement(Text, { color: colors[type] }, children)
+  );
+}

package/components/form/index.ts

@@ -0,0 +1,8 @@
+export { Form, FormField, FormMessage, useFormContext } from "./form.js";
+export type {
+  FormProps,
+  FormFieldProps,
+  FormMessageProps,
+  FormState,
+  FormContextValue,
+} from "./form.js";

package/components/hover-card/hover-card.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface HoverCardProps {
+  /** The trigger element */
+  children: React.ReactNode;
+  /** Content to show in the hover card */
+  content: React.ReactNode;
+  /** Whether the hover card is visible */
+  open: boolean;
+  /** Position of the card */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Width of the card */
+  width?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function HoverCard({
+  children,
+  content,
+  open,
+  position = "bottom",
+  width = 30,
+  tokens: propTokens,
+}: HoverCardProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const cardElement = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: tokens.colors.border,
+      width,
+      paddingX: 1,
+      paddingY: 0,
+      marginTop: position === "bottom" ? 0 : undefined,
+      marginBottom: position === "top" ? 0 : undefined,
+    },
+    content
+  );
+
+  if (!open) {
+    return React.createElement(Box, null, children);
+  }
+
+  const isVertical = position === "top" || position === "bottom";
+
+  const containerProps: Record<string, unknown> = {
+    flexDirection: isVertical ? "column" : "row",
+    alignItems: isVertical ? "flex-start" : "center",
+    gap: 0,
+  };
+
+  if (position === "top") {
+    return React.createElement(Box, containerProps, cardElement, children);
+  }
+
+  if (position === "bottom") {
+    return React.createElement(Box, containerProps, children, cardElement);
+  }
+
+  if (position === "left") {
+    return React.createElement(Box, containerProps, cardElement, children);
+  }
+
+  return React.createElement(Box, containerProps, children, cardElement);
+}

package/components/hover-card/index.ts

@@ -0,0 +1,2 @@
+export { HoverCard } from "./hover-card.js";
+export type { HoverCardProps } from "./hover-card.js";

package/components/input-otp/index.ts

@@ -0,0 +1,2 @@
+export { InputOTP } from "./input-otp.js";
+export type { InputOTPProps } from "./input-otp.js";

package/components/input-otp/input-otp.tsx

@@ -0,0 +1,176 @@
+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 InputOTPProps {
+  /** Number of OTP digits */
+  length?: number;
+  /** Controlled value */
+  value?: string;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Callback when all digits are filled */
+  onComplete?: (value: string) => void;
+  /** Whether to mask the input */
+  mask?: boolean;
+  /** Mask character */
+  maskChar?: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Label text */
+  label?: string;
+  /** Separator between groups */
+  separator?: string;
+  /** Group size (for visual grouping) */
+  groupSize?: number;
+}
+
+export function InputOTP({
+  length = 6,
+  value: controlledValue,
+  onChange,
+  onComplete,
+  mask = false,
+  maskChar = "●",
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  label,
+  separator = "-",
+  groupSize = 3,
+}: InputOTPProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("input-otp");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState("");
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      // Only allow digits
+      const digits = newValue.replace(/\D/g, "").slice(0, length);
+
+      if (!isControlled) {
+        setInternalValue(digits);
+      }
+      onChange?.(digits);
+
+      if (digits.length === length) {
+        onComplete?.(digits);
+      }
+    },
+    [isControlled, length, onChange, onComplete]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.backspace || key.delete) {
+        updateValue(currentValue.slice(0, -1));
+      } else if (/^\d$/.test(input)) {
+        updateValue(currentValue + input);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Render OTP boxes
+  const renderBoxes = () => {
+    const boxes: React.ReactElement[] = [];
+
+    for (let i = 0; i < length; i++) {
+      const char = currentValue[i];
+      const isCursor = i === currentValue.length && isFocused;
+      const isFilled = char !== undefined;
+
+      // Add separator between groups
+      if (i > 0 && groupSize > 0 && i % groupSize === 0) {
+        boxes.push(
+          React.createElement(
+            Text,
+            { key: `sep-${i}`, color: tokens.colors.muted },
+            ` ${separator} `
+          )
+        );
+      }
+
+      const displayChar = isFilled
+        ? mask
+          ? maskChar
+          : char
+        : isCursor
+          ? "▎"
+          : " ";
+
+      boxes.push(
+        React.createElement(
+          Box,
+          {
+            key: i,
+            borderStyle: "single",
+            borderColor: isCursor
+              ? tokens.colors.focus
+              : isFilled
+                ? tokens.colors.accent
+                : tokens.colors.border,
+            paddingX: 1,
+          },
+          React.createElement(
+            Text,
+            {
+              color: isCursor
+                ? tokens.colors.focus
+                : isFilled
+                  ? tokens.colors.fg
+                  : tokens.colors.muted,
+              bold: isFilled,
+            },
+            displayChar
+          )
+        )
+      );
+    }
+
+    return boxes;
+  };
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    // Label
+    label
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.fg, bold: true },
+          label
+        )
+      : null,
+    // OTP boxes
+    React.createElement(
+      Box,
+      {
+        gap: 0,
+        borderStyle: isFocused ? "round" : undefined,
+        borderColor: isFocused ? tokens.colors.focus : undefined,
+        paddingX: isFocused ? 1 : 0,
+      },
+      ...renderBoxes()
+    ),
+    // Status
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted, dimColor: true },
+      `${currentValue.length}/${length} digits`
+    )
+  );
+}

package/components/kbd/index.ts

@@ -0,0 +1,2 @@
+export { Kbd } from "./kbd.js";
+export type { KbdProps } from "./kbd.js";

package/components/kbd/kbd.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface KbdProps {
+  /** Key or key combination to display */
+  children: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Kbd({
+  children,
+  tokens: propTokens,
+}: KbdProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  return React.createElement(
+    Text,
+    {
+      backgroundColor: tokens.colors.border,
+      color: tokens.colors.fg,
+    },
+    " ",
+    children,
+    " "
+  );
+}

package/components/label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from "./label.js";
+export type { LabelProps } from "./label.js";

package/components/label/label.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface LabelProps {
+  /** Label text */
+  children: React.ReactNode;
+  /** Whether the associated field is required */
+  required?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Label position relative to its content */
+  position?: "top" | "left";
+  /** Description text below the label */
+  description?: string;
+}
+
+export function Label({
+  children,
+  required = false,
+  tokens: propTokens,
+  position = "top",
+  description,
+}: LabelProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const labelContent = React.createElement(
+    Box,
+    { gap: 0 },
+    React.createElement(
+      Text,
+      { color: tokens.colors.fg, bold: true },
+      children
+    ),
+    required
+      ? React.createElement(Text, { color: tokens.colors.danger }, " *")
+      : null
+  );
+
+  if (description) {
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      labelContent,
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        description
+      )
+    );
+  }
+
+  return labelContent;
+}

package/components/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from "./list.js";
+export type { ListProps, ListItem } from "./list.js";