@hauktui/registry 0.0.1

package/components/countdown/countdown.tsx

@@ -0,0 +1,165 @@
+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 CountdownProps {
+  /** Target date/time */
+  target: Date;
+  /** Callback when countdown reaches zero */
+  onComplete?: () => void;
+  /** Format to display */
+  format?: "full" | "compact" | "minimal";
+  /** Show labels */
+  showLabels?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Update interval in ms */
+  interval?: number;
+}
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  total: number;
+}
+
+export function Countdown({
+  target,
+  onComplete,
+  format = "full",
+  showLabels = true,
+  tokens: propTokens,
+  interval = 1000,
+}: CountdownProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const calculateTimeLeft = (): TimeLeft => {
+    const difference = target.getTime() - Date.now();
+
+    if (difference <= 0) {
+      return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+    }
+
+    return {
+      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((difference / (1000 * 60)) % 60),
+      seconds: Math.floor((difference / 1000) % 60),
+      total: difference,
+    };
+  };
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft);
+  const [completed, setCompleted] = useState(false);
+
+  useEffect(() => {
+    if (completed) return;
+
+    const timer = setInterval(() => {
+      const newTimeLeft = calculateTimeLeft();
+      setTimeLeft(newTimeLeft);
+
+      if (newTimeLeft.total <= 0 && !completed) {
+        setCompleted(true);
+        onComplete?.();
+        clearInterval(timer);
+      }
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [target, completed, interval]);
+
+  // Pad number with zeros
+  const pad = (n: number, digits = 2): string => {
+    return String(n).padStart(digits, "0");
+  };
+
+  // Render based on format
+  const renderCountdown = () => {
+    if (completed) {
+      return React.createElement(
+        Text,
+        { color: tokens.colors.success, bold: true },
+        "Completed!"
+      );
+    }
+
+    switch (format) {
+      case "minimal":
+        return React.createElement(
+          Text,
+          { color: tokens.colors.fg },
+          `${pad(timeLeft.hours + timeLeft.days * 24)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`
+        );
+
+      case "compact":
+        return React.createElement(
+          Box,
+          { gap: 1 },
+          timeLeft.days > 0 &&
+            React.createElement(
+              Text,
+              { color: tokens.colors.accent, bold: true },
+              `${timeLeft.days}d`
+            ),
+          React.createElement(
+            Text,
+            { color: tokens.colors.accent, bold: true },
+            `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`
+          )
+        );
+
+      case "full":
+      default:
+        const units = [
+          { value: timeLeft.days, label: "days", show: timeLeft.days > 0 },
+          { value: timeLeft.hours, label: "hours", show: true },
+          { value: timeLeft.minutes, label: "mins", show: true },
+          { value: timeLeft.seconds, label: "secs", show: true },
+        ].filter((u) => u.show);
+
+        return React.createElement(
+          Box,
+          { gap: 2 },
+          ...units.map((unit, index) =>
+            React.createElement(
+              Box,
+              {
+                key: index,
+                flexDirection: "column",
+                alignItems: "center",
+              },
+              React.createElement(
+                Text,
+                {
+                  color: tokens.colors.accent,
+                  bold: true,
+                },
+                pad(unit.value)
+              ),
+              showLabels &&
+                React.createElement(
+                  Text,
+                  { color: tokens.colors.muted, dimColor: true },
+                  unit.label
+                )
+            )
+          )
+        );
+    }
+  };
+
+  return React.createElement(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: completed ? tokens.colors.success : tokens.colors.border,
+      paddingX: 1,
+    },
+    renderCountdown()
+  );
+}

package/components/countdown/index.ts

@@ -0,0 +1,2 @@
+export { Countdown } from "./countdown.js";
+export type { CountdownProps } from "./countdown.js";

package/components/data-table/data-table.tsx

@@ -0,0 +1,256 @@
+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 DataTableColumn<T> {
+  /** Column header */
+  header: string;
+  /** Key to access data */
+  accessor: keyof T;
+  /** Column width */
+  width?: number;
+  /** Alignment */
+  align?: "left" | "center" | "right";
+  /** Custom render function */
+  render?: (value: T[keyof T], row: T) => React.ReactNode;
+}
+
+export interface DataTableProps<T extends Record<string, unknown>> {
+  /** Column definitions */
+  columns: DataTableColumn<T>[];
+  /** Data rows */
+  data: T[];
+  /** Callback when row is selected */
+  onSelect?: (row: T, index: number) => void;
+  /** Maximum visible rows */
+  maxRows?: number;
+  /** Whether rows are selectable */
+  selectable?: boolean;
+  /** Show row numbers */
+  showRowNumbers?: boolean;
+  /** Enable sorting */
+  sortable?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Striped rows */
+  striped?: boolean;
+}
+
+export function DataTable<T extends Record<string, unknown>>({
+  columns,
+  data,
+  onSelect,
+  maxRows = 10,
+  selectable = true,
+  showRowNumbers = false,
+  sortable = true,
+  tokens: propTokens,
+  focusId,
+  striped = true,
+}: DataTableProps<T>): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("data-table");
+  const { isFocused } = useFocusable(id);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [sortColumn, setSortColumn] = useState<keyof T | null>(null);
+  const [sortAsc, setSortAsc] = useState(true);
+
+  const sortedData = React.useMemo(() => {
+    if (!sortColumn) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[sortColumn];
+      const bVal = b[sortColumn];
+      if (aVal < bVal) return sortAsc ? -1 : 1;
+      if (aVal > bVal) return sortAsc ? 1 : -1;
+      return 0;
+    });
+  }, [data, sortColumn, sortAsc]);
+
+  const visibleData = sortedData.slice(scrollOffset, scrollOffset + maxRows);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.upArrow || input === "k") {
+        if (selectedIndex > 0) {
+          setSelectedIndex(selectedIndex - 1);
+          if (selectedIndex - 1 < scrollOffset) {
+            setScrollOffset(scrollOffset - 1);
+          }
+        }
+      } else if (key.downArrow || input === "j") {
+        if (selectedIndex < sortedData.length - 1) {
+          setSelectedIndex(selectedIndex + 1);
+          if (selectedIndex + 1 >= scrollOffset + maxRows) {
+            setScrollOffset(scrollOffset + 1);
+          }
+        }
+      } else if (input === "g") {
+        setSelectedIndex(0);
+        setScrollOffset(0);
+      } else if (input === "G") {
+        setSelectedIndex(sortedData.length - 1);
+        setScrollOffset(Math.max(0, sortedData.length - maxRows));
+      } else if (key.return && selectable) {
+        onSelect?.(sortedData[selectedIndex]!, selectedIndex);
+      } else if (sortable && input === "s") {
+        // Cycle through columns for sorting
+        const currentColIndex = sortColumn
+          ? columns.findIndex((c) => c.accessor === sortColumn)
+          : -1;
+        const nextColIndex = (currentColIndex + 1) % columns.length;
+        const nextCol = columns[nextColIndex]!.accessor;
+        if (nextCol === sortColumn) {
+          setSortAsc(!sortAsc);
+        } else {
+          setSortColumn(nextCol);
+          setSortAsc(true);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const getColumnWidth = (col: DataTableColumn<T>): number => {
+    if (col.width) return col.width;
+    const headerLen = col.header.length;
+    const maxDataLen = Math.max(
+      ...data.map((row) => String(row[col.accessor] ?? "").length)
+    );
+    return Math.max(headerLen, maxDataLen) + 2;
+  };
+
+  // Header row
+  const headerRow = React.createElement(
+    Box,
+    { gap: 0 },
+    showRowNumbers
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, bold: true },
+          "#".padEnd(4)
+        )
+      : null,
+    ...columns.map((col) => {
+      const width = getColumnWidth(col);
+      const isSorted = sortColumn === col.accessor;
+      const sortIndicator = isSorted ? (sortAsc ? " ▲" : " ▼") : "";
+
+      return React.createElement(
+        Text,
+        {
+          key: String(col.accessor),
+          color: tokens.colors.fg,
+          bold: true,
+        },
+        (col.header + sortIndicator).padEnd(width)
+      );
+    })
+  );
+
+  // Separator
+  const totalWidth =
+    columns.reduce((sum, col) => sum + getColumnWidth(col), 0) +
+    (showRowNumbers ? 4 : 0);
+  const separator = React.createElement(
+    Text,
+    { color: tokens.colors.border },
+    "─".repeat(totalWidth)
+  );
+
+  // Data rows
+  const dataRows = visibleData.map((row, visibleIdx) => {
+    const actualIndex = scrollOffset + visibleIdx;
+    const isSelected = actualIndex === selectedIndex;
+    const isStriped = striped && visibleIdx % 2 === 1;
+
+    return React.createElement(
+      Box,
+      { key: actualIndex, gap: 0 },
+      showRowNumbers
+        ? React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            (actualIndex + 1).toString().padEnd(4)
+          )
+        : null,
+      ...columns.map((col) => {
+        const width = getColumnWidth(col);
+        const value = row[col.accessor];
+        const displayValue = col.render
+          ? col.render(value, row)
+          : String(value ?? "");
+
+        let text = String(displayValue);
+        if (col.align === "right") {
+          text = text.padStart(width);
+        } else if (col.align === "center") {
+          const pad = Math.floor((width - text.length) / 2);
+          text = " ".repeat(pad) + text + " ".repeat(width - pad - text.length);
+        } else {
+          text = text.padEnd(width);
+        }
+
+        return React.createElement(
+          Text,
+          {
+            key: String(col.accessor),
+            color:
+              isSelected && isFocused ? tokens.colors.accent : tokens.colors.fg,
+            bold: isSelected && isFocused,
+            backgroundColor:
+              isSelected && isFocused
+                ? undefined
+                : isStriped
+                  ? tokens.colors.muted + "20"
+                  : undefined,
+          },
+          text
+        );
+      })
+    );
+  });
+
+  // Scroll indicator
+  const showScrollIndicator = sortedData.length > maxRows;
+  const scrollInfo = showScrollIndicator
+    ? React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        `${selectedIndex + 1}/${sortedData.length}`
+      )
+    : null;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+    },
+    headerRow,
+    separator,
+    ...dataRows,
+    showScrollIndicator
+      ? React.createElement(
+          Box,
+          { justifyContent: "space-between", marginTop: 0 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted, dimColor: true },
+            "j/k navigate  g/G top/bottom  s sort"
+          ),
+          scrollInfo
+        )
+      : null
+  );
+}

package/components/data-table/index.ts

@@ -0,0 +1,2 @@
+export { DataTable } from "./data-table.js";
+export type { DataTableProps, DataTableColumn } from "./data-table.js";

package/components/date-picker/date-picker.tsx

@@ -0,0 +1,280 @@
+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 DatePickerProps {
+  /** Selected date */
+  value?: Date;
+  /** Callback when date is selected */
+  onChange?: (date: Date) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Date format */
+  format?: "short" | "medium" | "long";
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Label */
+  label?: string;
+}
+
+const MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+function formatDate(date: Date, format: "short" | "medium" | "long"): string {
+  const day = date.getDate();
+  const month = date.getMonth();
+  const year = date.getFullYear();
+
+  switch (format) {
+    case "short":
+      return `${month + 1}/${day}/${year}`;
+    case "medium":
+      return `${MONTHS[month]} ${day}, ${year}`;
+    case "long":
+      return date.toLocaleDateString("en-US", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    default:
+      return `${month + 1}/${day}/${year}`;
+  }
+}
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder = "Select date...",
+  format = "medium",
+  minDate,
+  maxDate,
+  tokens: propTokens,
+  focusId,
+  label,
+}: DatePickerProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("date-picker");
+  const { isFocused } = useFocusable(id);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [tempDate, setTempDate] = useState(value || new Date());
+  const [editField, setEditField] = useState<"month" | "day" | "year">("month");
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.return && !isOpen) {
+        setIsOpen(true);
+        setTempDate(value || new Date());
+        return;
+      }
+
+      if (key.escape && isOpen) {
+        setIsOpen(false);
+        return;
+      }
+
+      if (isOpen) {
+        const year = tempDate.getFullYear();
+        const month = tempDate.getMonth();
+        const day = tempDate.getDate();
+
+        if (key.tab) {
+          if (editField === "month") setEditField("day");
+          else if (editField === "day") setEditField("year");
+          else setEditField("month");
+          return;
+        }
+
+        if (key.upArrow || input === "k") {
+          if (editField === "month") {
+            setTempDate(
+              new Date(
+                year,
+                month + 1,
+                Math.min(day, getDaysInMonth(year, month + 1))
+              )
+            );
+          } else if (editField === "day") {
+            const maxDay = getDaysInMonth(year, month);
+            setTempDate(new Date(year, month, day < maxDay ? day + 1 : 1));
+          } else {
+            setTempDate(new Date(year + 1, month, day));
+          }
+        } else if (key.downArrow || input === "j") {
+          if (editField === "month") {
+            setTempDate(
+              new Date(
+                year,
+                month - 1,
+                Math.min(day, getDaysInMonth(year, month - 1))
+              )
+            );
+          } else if (editField === "day") {
+            const maxDay = getDaysInMonth(year, month);
+            setTempDate(new Date(year, month, day > 1 ? day - 1 : maxDay));
+          } else {
+            setTempDate(new Date(year - 1, month, day));
+          }
+        } else if (key.return) {
+          if (minDate && tempDate < minDate) return;
+          if (maxDate && tempDate > maxDate) return;
+          onChange?.(tempDate);
+          setIsOpen(false);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const displayValue = value ? formatDate(value, format) : placeholder;
+
+  const picker = React.createElement(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+      gap: 1,
+    },
+    React.createElement(
+      Text,
+      { color: value ? tokens.colors.fg : tokens.colors.muted },
+      displayValue
+    ),
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted },
+      isOpen ? "▲" : "▼"
+    )
+  );
+
+  if (!isOpen) {
+    if (label) {
+      return React.createElement(
+        Box,
+        { flexDirection: "column" },
+        React.createElement(
+          Text,
+          { color: tokens.colors.fg, bold: true },
+          label
+        ),
+        picker
+      );
+    }
+    return picker;
+  }
+
+  // Expanded date picker
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    label
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.fg, bold: true },
+          label
+        )
+      : null,
+    picker,
+    React.createElement(
+      Box,
+      {
+        borderStyle: "round",
+        borderColor: tokens.colors.border,
+        paddingX: 1,
+        gap: 2,
+        marginTop: 0,
+      },
+      React.createElement(
+        Box,
+        { flexDirection: "column", alignItems: "center" },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "Month"
+        ),
+        React.createElement(
+          Text,
+          {
+            color:
+              editField === "month" ? tokens.colors.accent : tokens.colors.fg,
+            bold: editField === "month",
+            inverse: editField === "month",
+          },
+          ` ${MONTHS[tempDate.getMonth()]} `
+        )
+      ),
+      React.createElement(
+        Box,
+        { flexDirection: "column", alignItems: "center" },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "Day"
+        ),
+        React.createElement(
+          Text,
+          {
+            color:
+              editField === "day" ? tokens.colors.accent : tokens.colors.fg,
+            bold: editField === "day",
+            inverse: editField === "day",
+          },
+          ` ${tempDate.getDate().toString().padStart(2, "0")} `
+        )
+      ),
+      React.createElement(
+        Box,
+        { flexDirection: "column", alignItems: "center" },
+        React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          "Year"
+        ),
+        React.createElement(
+          Text,
+          {
+            color:
+              editField === "year" ? tokens.colors.accent : tokens.colors.fg,
+            bold: editField === "year",
+            inverse: editField === "year",
+          },
+          ` ${tempDate.getFullYear()} `
+        )
+      )
+    ),
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted, dimColor: true },
+      "Tab switch field  ↑↓ adjust  Enter confirm  Esc cancel"
+    )
+  );
+}

package/components/date-picker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./date-picker.js";
+export type { DatePickerProps } from "./date-picker.js";