@hauktui/registry 0.0.1

package/components/calendar/calendar.tsx

@@ -0,0 +1,250 @@
+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 CalendarProps {
+  /** Selected date */
+  value?: Date;
+  /** Callback when date is selected */
+  onChange?: (date: Date) => void;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Show week numbers */
+  showWeekNumbers?: boolean;
+}
+
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+export function Calendar({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  tokens: propTokens,
+  focusId,
+  showWeekNumbers = false,
+}: CalendarProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("calendar");
+  const { isFocused } = useFocusable(id);
+
+  const today = new Date();
+  const [viewDate, setViewDate] = useState(value || today);
+  const [selectedDay, setSelectedDay] = useState(
+    value?.getDate() || today.getDate()
+  );
+
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfMonth(year, month);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.leftArrow || input === "h") {
+        if (selectedDay > 1) {
+          setSelectedDay(selectedDay - 1);
+        } else {
+          // Go to previous month
+          const prevMonth = new Date(year, month - 1, 1);
+          setViewDate(prevMonth);
+          setSelectedDay(
+            getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth())
+          );
+        }
+      } else if (key.rightArrow || input === "l") {
+        if (selectedDay < daysInMonth) {
+          setSelectedDay(selectedDay + 1);
+        } else {
+          // Go to next month
+          setViewDate(new Date(year, month + 1, 1));
+          setSelectedDay(1);
+        }
+      } else if (key.upArrow || input === "k") {
+        if (selectedDay > 7) {
+          setSelectedDay(selectedDay - 7);
+        } else {
+          const prevMonth = new Date(year, month - 1, 1);
+          const prevDays = getDaysInMonth(
+            prevMonth.getFullYear(),
+            prevMonth.getMonth()
+          );
+          setViewDate(prevMonth);
+          setSelectedDay(prevDays - (7 - selectedDay));
+        }
+      } else if (key.downArrow || input === "j") {
+        if (selectedDay + 7 <= daysInMonth) {
+          setSelectedDay(selectedDay + 7);
+        } else {
+          setViewDate(new Date(year, month + 1, 1));
+          setSelectedDay(selectedDay + 7 - daysInMonth);
+        }
+      } else if (key.return) {
+        const selected = new Date(year, month, selectedDay);
+        if (minDate && selected < minDate) return;
+        if (maxDate && selected > maxDate) return;
+        onChange?.(selected);
+      } else if (input === "[") {
+        // Previous month
+        setViewDate(new Date(year, month - 1, 1));
+        setSelectedDay(1);
+      } else if (input === "]") {
+        // Next month
+        setViewDate(new Date(year, month + 1, 1));
+        setSelectedDay(1);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Build calendar grid
+  const weeks: React.ReactElement[] = [];
+
+  // Header
+  weeks.push(
+    React.createElement(
+      Box,
+      { key: "header", gap: 1 },
+      showWeekNumbers
+        ? React.createElement(Text, { color: tokens.colors.muted }, "Wk")
+        : null,
+      ...DAYS.map((day) =>
+        React.createElement(
+          Text,
+          { key: day, color: tokens.colors.muted, bold: true },
+          day
+        )
+      )
+    )
+  );
+
+  // Days
+  let week: React.ReactElement[] = [];
+  let weekNum = 1;
+
+  // Add empty cells for days before first of month
+  for (let i = 0; i < firstDay; i++) {
+    week.push(React.createElement(Text, { key: `empty-${i}` }, "  "));
+  }
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    const isSelected = day === selectedDay;
+    const isToday =
+      day === today.getDate() &&
+      month === today.getMonth() &&
+      year === today.getFullYear();
+    const date = new Date(year, month, day);
+    const isDisabled =
+      (minDate && date < minDate) || (maxDate && date > maxDate);
+
+    week.push(
+      React.createElement(
+        Text,
+        {
+          key: `day-${day}`,
+          color: isDisabled
+            ? tokens.colors.muted
+            : isSelected
+              ? tokens.colors.accent
+              : isToday
+                ? tokens.colors.warning
+                : tokens.colors.fg,
+          bold: isSelected || isToday,
+          inverse: isSelected,
+          dimColor: isDisabled,
+        },
+        day.toString().padStart(2, " ")
+      )
+    );
+
+    if ((firstDay + day) % 7 === 0 || day === daysInMonth) {
+      // Fill remaining cells in last week
+      while (week.length < 7 + (showWeekNumbers ? 1 : 0)) {
+        week.push(
+          React.createElement(Text, { key: `fill-${week.length}` }, "  ")
+        );
+      }
+
+      weeks.push(
+        React.createElement(
+          Box,
+          { key: `week-${weekNum}`, gap: 1 },
+          showWeekNumbers
+            ? React.createElement(
+                Text,
+                { color: tokens.colors.muted, dimColor: true },
+                weekNum.toString().padStart(2, " ")
+              )
+            : null,
+          ...week
+        )
+      );
+      week = [];
+      weekNum++;
+    }
+  }
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+      paddingY: 0,
+    },
+    // Month/Year header
+    React.createElement(
+      Box,
+      { justifyContent: "space-between", marginBottom: 0 },
+      React.createElement(Text, { color: tokens.colors.muted }, "["),
+      React.createElement(
+        Text,
+        { bold: true, color: tokens.colors.fg },
+        `${MONTHS[month]} ${year}`
+      ),
+      React.createElement(Text, { color: tokens.colors.muted }, "]")
+    ),
+    // Calendar grid
+    ...weeks,
+    // Footer hint
+    React.createElement(
+      Text,
+      { color: tokens.colors.muted, dimColor: true },
+      "←↑↓→ navigate  [/] month  Enter select"
+    )
+  );
+}

package/components/calendar/index.ts

@@ -0,0 +1,2 @@
+export { Calendar } from "./calendar.js";
+export type { CalendarProps } from "./calendar.js";

package/components/card/card.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface CardProps {
+  /** Card title */
+  title?: string;
+  /** Card description */
+  description?: string;
+  /** Card content */
+  children?: React.ReactNode;
+  /** Card footer */
+  footer?: React.ReactNode;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Border style */
+  borderStyle?: "single" | "double" | "round" | "bold" | "classic";
+  /** Card width */
+  width?: number;
+}
+
+export function Card({
+  title,
+  description,
+  children,
+  footer,
+  tokens: propTokens,
+  borderStyle = "round",
+  width,
+}: CardProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle,
+      borderColor: tokens.colors.border,
+      paddingX: 1,
+      paddingY: 0,
+      width,
+    },
+    // Header
+    title || description
+      ? React.createElement(
+          Box,
+          { flexDirection: "column", marginBottom: children ? 1 : 0 },
+          title
+            ? React.createElement(
+                Text,
+                { color: tokens.colors.fg, bold: true },
+                title
+              )
+            : null,
+          description
+            ? React.createElement(
+                Text,
+                { color: tokens.colors.muted, dimColor: true },
+                description
+              )
+            : null
+        )
+      : null,
+    // Content
+    children
+      ? React.createElement(Box, { flexDirection: "column" }, children)
+      : null,
+    // Footer
+    footer
+      ? React.createElement(
+          Box,
+          {
+            marginTop: 1,
+            paddingTop: 0,
+            borderStyle: "single",
+            borderTop: true,
+            borderBottom: false,
+            borderLeft: false,
+            borderRight: false,
+            borderColor: tokens.colors.border,
+          },
+          footer
+        )
+      : null
+  );
+}

package/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from "./card.js";
+export type { CardProps } from "./card.js";

package/components/carousel/carousel.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } 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 CarouselItem {
+  /** Unique identifier */
+  id: string;
+  /** Content to display */
+  content: React.ReactNode;
+  /** Optional label */
+  label?: string;
+}
+
+export interface CarouselProps {
+  /** Carousel items */
+  items: CarouselItem[];
+  /** Current active index */
+  activeIndex?: number;
+  /** Callback when active item changes */
+  onChange?: (index: number) => void;
+  /** Auto-play interval in ms (0 to disable) */
+  autoPlay?: number;
+  /** Show navigation arrows */
+  showArrows?: boolean;
+  /** Show dots indicator */
+  showDots?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Carousel({
+  items,
+  activeIndex: controlledIndex,
+  onChange,
+  autoPlay = 0,
+  showArrows = true,
+  showDots = true,
+  tokens: propTokens,
+  focusId,
+  orientation = "horizontal",
+}: CarouselProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("carousel");
+  const { isFocused } = useFocusable(id);
+
+  const [internalIndex, setInternalIndex] = useState(0);
+  const activeIdx = controlledIndex ?? internalIndex;
+
+  const setIndex = (index: number) => {
+    const newIndex = clamp(index, 0, items.length - 1);
+    setInternalIndex(newIndex);
+    onChange?.(newIndex);
+  };
+
+  useEffect(() => {
+    if (autoPlay > 0 && !isFocused) {
+      const timer = setInterval(() => {
+        setIndex((activeIdx + 1) % items.length);
+      }, autoPlay);
+      return () => clearInterval(timer);
+    }
+  }, [autoPlay, activeIdx, items.length, isFocused]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (orientation === "horizontal") {
+        if (key.leftArrow || input === "h") {
+          setIndex(activeIdx > 0 ? activeIdx - 1 : items.length - 1);
+        } else if (key.rightArrow || input === "l") {
+          setIndex(activeIdx < items.length - 1 ? activeIdx + 1 : 0);
+        }
+      } else {
+        if (key.upArrow || input === "k") {
+          setIndex(activeIdx > 0 ? activeIdx - 1 : items.length - 1);
+        } else if (key.downArrow || input === "j") {
+          setIndex(activeIdx < items.length - 1 ? activeIdx + 1 : 0);
+        }
+      }
+
+      // Number keys for direct access
+      const num = parseInt(input, 10);
+      if (num >= 1 && num <= items.length) {
+        setIndex(num - 1);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const currentItem = items[activeIdx];
+
+  const leftArrow = showArrows
+    ? React.createElement(
+        Text,
+        {
+          color: isFocused ? tokens.colors.accent : tokens.colors.muted,
+          bold: isFocused,
+        },
+        orientation === "horizontal" ? "◀" : "▲"
+      )
+    : null;
+
+  const rightArrow = showArrows
+    ? React.createElement(
+        Text,
+        {
+          color: isFocused ? tokens.colors.accent : tokens.colors.muted,
+          bold: isFocused,
+        },
+        orientation === "horizontal" ? "▶" : "▼"
+      )
+    : null;
+
+  const dots = showDots
+    ? React.createElement(
+        Box,
+        { gap: 1, justifyContent: "center" },
+        ...items.map((item, index) =>
+          React.createElement(
+            Text,
+            {
+              key: item.id,
+              color:
+                index === activeIdx
+                  ? tokens.colors.accent
+                  : tokens.colors.muted,
+            },
+            index === activeIdx ? "●" : "○"
+          )
+        )
+      )
+    : null;
+
+  const content = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 2,
+      paddingY: 1,
+      flexGrow: 1,
+    },
+    currentItem?.label
+      ? React.createElement(
+          Text,
+          { bold: true, color: tokens.colors.fg },
+          currentItem.label
+        )
+      : null,
+    currentItem?.content
+  );
+
+  if (orientation === "horizontal") {
+    return React.createElement(
+      Box,
+      { flexDirection: "column", gap: 0 },
+      React.createElement(
+        Box,
+        { alignItems: "center", gap: 1 },
+        leftArrow,
+        content,
+        rightArrow
+      ),
+      dots
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", alignItems: "center", gap: 0 },
+    leftArrow,
+    content,
+    rightArrow,
+    dots
+  );
+}

package/components/carousel/index.ts

@@ -0,0 +1,2 @@
+export { Carousel } from "./carousel.js";
+export type { CarouselProps, CarouselItem } from "./carousel.js";