@nick-skriabin/glyph 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,407 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { Node } from 'yoga-layout';
+
+type NamedColor = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "blackBright" | "redBright" | "greenBright" | "yellowBright" | "blueBright" | "magentaBright" | "cyanBright" | "whiteBright";
+type HexColor = `#${string}`;
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+type Color = NamedColor | HexColor | RGBColor | number;
+type DimensionValue = number | `${number}%`;
+type BorderStyle = "none" | "single" | "double" | "round" | "ascii";
+type WrapMode = "wrap" | "truncate" | "ellipsis" | "none";
+type TextAlign = "left" | "center" | "right";
+interface Style {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    padding?: number;
+    paddingX?: number;
+    paddingY?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    gap?: number;
+    flexDirection?: "row" | "column";
+    flexWrap?: "nowrap" | "wrap";
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+    flexGrow?: number;
+    flexShrink?: number;
+    position?: "relative" | "absolute";
+    top?: DimensionValue;
+    right?: DimensionValue;
+    bottom?: DimensionValue;
+    left?: DimensionValue;
+    inset?: DimensionValue;
+    zIndex?: number;
+    pointerEvents?: "auto" | "none";
+    bg?: Color;
+    border?: BorderStyle;
+    borderColor?: Color;
+    clip?: boolean;
+    color?: Color;
+    bold?: boolean;
+    dim?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    wrap?: WrapMode;
+    textAlign?: TextAlign;
+}
+interface LayoutRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    innerX: number;
+    innerY: number;
+    innerWidth: number;
+    innerHeight: number;
+}
+interface Key {
+    name: string;
+    sequence: string;
+    ctrl?: boolean;
+    alt?: boolean;
+    shift?: boolean;
+}
+interface RenderOptions {
+    stdout?: NodeJS.WriteStream;
+    stdin?: NodeJS.ReadStream;
+    debug?: boolean;
+}
+interface AppHandle {
+    unmount(): void;
+    exit(code?: number): void;
+}
+
+declare function render(element: ReactElement, opts?: RenderOptions): AppHandle;
+
+interface BoxProps {
+    style?: Style;
+    children?: ReactNode;
+    focusable?: boolean;
+}
+declare function Box({ children, style, focusable }: BoxProps): React.JSX.Element;
+
+interface TextProps {
+    style?: Style;
+    children?: ReactNode;
+    wrap?: Style["wrap"];
+}
+declare function Text({ children, style, wrap }: TextProps): React.JSX.Element;
+
+interface InputProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    style?: Style;
+    /** Style when focused (merged with style) */
+    focusedStyle?: Style;
+    /** Enable multiline editing (Enter inserts newlines, Up/Down navigate lines). */
+    multiline?: boolean;
+}
+declare function Input(props: InputProps): React.JSX.Element;
+
+interface FocusScopeProps {
+    trap?: boolean;
+    children?: ReactNode;
+}
+declare function FocusScope({ trap, children }: FocusScopeProps): React.JSX.Element;
+
+interface SpacerProps {
+    size?: number;
+}
+declare function Spacer({ size }: SpacerProps): React.JSX.Element;
+
+interface KeybindProps {
+    /** Key descriptor, e.g. "q", "escape", "ctrl+c", "ctrl+shift+a" */
+    keypress: string;
+    /** Handler called when the key matches */
+    onPress: () => void;
+    /** Only fire when this focus ID is active */
+    whenFocused?: string;
+    /** Only fire when nothing is focused or the focused element doesn't consume the key */
+    global?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+declare function Keybind({ keypress, onPress, whenFocused, disabled, }: KeybindProps): null;
+
+interface PortalProps {
+    children?: ReactNode;
+    zIndex?: number;
+}
+/**
+ * Portal renders children as a fullscreen absolute overlay on top of the main tree.
+ * Useful for modals, notifications, and dropdowns that should paint above all other content.
+ */
+declare function Portal({ children, zIndex }: PortalProps): React.JSX.Element;
+
+interface ButtonProps {
+    onPress?: () => void;
+    style?: Style;
+    focusedStyle?: Style;
+    children?: ReactNode;
+    disabled?: boolean;
+}
+declare function Button({ onPress, style, focusedStyle, children, disabled, }: ButtonProps): React.JSX.Element;
+
+interface ScrollViewProps {
+    children?: ReactNode;
+    style?: Style;
+    /** Controlled scroll offset (rows from top) */
+    scrollOffset?: number;
+    /** Callback when scroll offset should change (controlled mode) */
+    onScroll?: (offset: number) => void;
+    /** Initial offset for uncontrolled mode */
+    defaultScrollOffset?: number;
+    /** Lines to scroll per arrow key press (default: 1) */
+    scrollStep?: number;
+    /** Disable keyboard scrolling */
+    disableKeyboard?: boolean;
+    /** Auto-scroll to focused element (default: true) */
+    scrollToFocus?: boolean;
+    /** Show scrollbar when content is scrollable (default: true) */
+    showScrollbar?: boolean;
+}
+declare function ScrollView({ children, style, scrollOffset: controlledOffset, onScroll, defaultScrollOffset, scrollStep, disableKeyboard, scrollToFocus, showScrollbar, }: ScrollViewProps): React.JSX.Element;
+
+interface ListItemInfo {
+    index: number;
+    selected: boolean;
+    focused: boolean;
+}
+interface ListProps {
+    /** Total number of items */
+    count: number;
+    /** Render function for each item */
+    renderItem: (info: ListItemInfo) => ReactNode;
+    /** Controlled selected index */
+    selectedIndex?: number;
+    /** Callback when selected index should change */
+    onSelectionChange?: (index: number) => void;
+    /** Callback when enter is pressed on selected item */
+    onSelect?: (index: number) => void;
+    /** Initial index for uncontrolled mode */
+    defaultSelectedIndex?: number;
+    /** Set of disabled indices that are skipped during navigation */
+    disabledIndices?: Set<number>;
+    /** Outer box style */
+    style?: Style;
+    /** Whether the list is focusable (default: true) */
+    focusable?: boolean;
+}
+declare function List({ count, renderItem, selectedIndex: controlledIndex, onSelectionChange, onSelect, defaultSelectedIndex, disabledIndices, style, focusable, }: ListProps): React.JSX.Element;
+
+interface MenuItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface MenuProps {
+    items: MenuItem[];
+    /** Controlled selected index */
+    selectedIndex?: number;
+    /** Callback when selected index changes */
+    onSelectionChange?: (index: number) => void;
+    /** Callback when enter is pressed on item */
+    onSelect?: (value: string, index: number) => void;
+    /** Initial index for uncontrolled mode */
+    defaultSelectedIndex?: number;
+    /** Outer box style */
+    style?: Style;
+    /** Color for the selected item indicator and text (default: "cyan") */
+    highlightColor?: Color;
+    /** Whether the menu is focusable (default: true) */
+    focusable?: boolean;
+}
+declare function Menu({ items, selectedIndex, onSelectionChange, onSelect, defaultSelectedIndex, style, highlightColor, focusable, }: MenuProps): React.JSX.Element;
+
+interface ProgressProps {
+    /** Progress value 0..1. Omit when indeterminate. */
+    value?: number;
+    /** Animate as indeterminate (marquee). Default false. */
+    indeterminate?: boolean;
+    /** Width of the progress bar. Default "100%". */
+    width?: DimensionValue;
+    /** Optional label text displayed before the bar. */
+    label?: string;
+    /** Show percentage text after the bar. Default false. */
+    showPercent?: boolean;
+    /** Outer container style. */
+    style?: Style;
+    /** Character(s) for the filled portion. Default "█". */
+    filled?: string;
+    /** Character(s) for the empty portion. Default "░". */
+    empty?: string;
+}
+declare function Progress({ value, indeterminate, width, label, showPercent, style, filled, empty, }: ProgressProps): React.JSX.Element;
+
+interface SpinnerProps {
+    /** Animation frames. Defaults to braille dots. */
+    frames?: string[];
+    /** Interval between frames in ms. Default 80. */
+    intervalMs?: number;
+    /** Optional label text next to the spinner. */
+    label?: string;
+    /** Style applied to the spinner character. */
+    style?: Style;
+}
+declare function Spinner({ frames, intervalMs, label, style, }: SpinnerProps): React.JSX.Element;
+
+type ToastVariant = "info" | "success" | "warning" | "error";
+interface Toast {
+    id: string;
+    message: string;
+    title?: string;
+    variant?: ToastVariant;
+    durationMs?: number;
+}
+type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+interface ToastHostProps {
+    /** Where toasts appear. Default "bottom-right". */
+    position?: ToastPosition;
+    /** Max visible toasts. Default 5. */
+    maxVisible?: number;
+    children?: ReactNode;
+}
+declare function useToast(): (toast: Omit<Toast, "id">) => void;
+declare function ToastHost({ position, maxVisible, children, }: ToastHostProps): React.JSX.Element;
+
+interface SelectItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /** List of selectable items */
+    items: SelectItem[];
+    /** Currently selected value (controlled) */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Trigger box style */
+    style?: Style;
+    /** Trigger style when focused */
+    focusedStyle?: Style;
+    /** Dropdown overlay style overrides */
+    dropdownStyle?: Style;
+    /** Highlight color for the selected item in the dropdown (default: "cyan") */
+    highlightColor?: Color;
+    /** Max visible items in the dropdown before scrolling (default: 8) */
+    maxVisible?: number;
+    /** Enable type-to-filter when dropdown is open (default: true) */
+    searchable?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+declare function Select({ items, value, onChange, placeholder, style, focusedStyle, dropdownStyle, highlightColor, maxVisible, searchable, disabled, }: SelectProps): React.JSX.Element;
+
+interface CheckboxProps {
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Called when the checkbox is toggled */
+    onChange: (checked: boolean) => void;
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Style for the checkbox container */
+    style?: Style;
+    /** Style when focused */
+    focusedStyle?: Style;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Custom character for checked state (default: "✓") */
+    checkedChar?: string;
+    /** Custom character for unchecked state (default: " ") */
+    uncheckedChar?: string;
+}
+declare function Checkbox({ checked, onChange, label, style, focusedStyle, disabled, checkedChar, uncheckedChar, }: CheckboxProps): React.JSX.Element;
+
+interface RadioItem<T = string> {
+    /** Display label */
+    label: string;
+    /** Value returned on selection */
+    value: T;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface RadioProps<T = string> {
+    /** Radio options */
+    items: RadioItem<T>[];
+    /** Currently selected value */
+    value: T | undefined;
+    /** Called when selection changes */
+    onChange: (value: T) => void;
+    /** Style for the radio group container */
+    style?: Style;
+    /** Style for each radio item */
+    itemStyle?: Style;
+    /** Style for the focused item */
+    focusedItemStyle?: Style;
+    /** Style for the selected item */
+    selectedItemStyle?: Style;
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Layout direction (default: "column") */
+    direction?: "row" | "column";
+    /** Gap between items (default: 0) */
+    gap?: number;
+    /** Custom character for selected state (default: "●") */
+    selectedChar?: string;
+    /** Custom character for unselected state (default: "○") */
+    unselectedChar?: string;
+}
+declare function Radio<T = string>({ items, value, onChange, style, itemStyle, focusedItemStyle, selectedItemStyle, disabled, direction, gap, selectedChar, unselectedChar, }: RadioProps<T>): React.JSX.Element;
+
+declare function useInput(handler: (key: Key) => void, deps?: any[]): void;
+
+type GlyphNodeType = "box" | "text" | "input";
+interface GlyphNode {
+    type: GlyphNodeType;
+    props: Record<string, any>;
+    style: Style;
+    children: GlyphNode[];
+    rawTextChildren: GlyphTextInstance[];
+    parent: GlyphNode | null;
+    yogaNode: Node | null;
+    text: string | null;
+    layout: LayoutRect;
+    focusId: string | null;
+    hidden: boolean;
+}
+interface GlyphTextInstance {
+    type: "raw-text";
+    text: string;
+    parent: GlyphNode | null;
+}
+
+interface UseFocusResult {
+    focused: boolean;
+    focus(): void;
+}
+declare function useFocus(nodeRef?: {
+    current: GlyphNode | null;
+}): UseFocusResult;
+
+declare function useLayout(nodeRef?: {
+    current: GlyphNode | null;
+}): LayoutRect;
+
+interface UseAppResult {
+    exit(code?: number): void;
+    columns: number;
+    rows: number;
+}
+declare function useApp(): UseAppResult;
+
+export { type AppHandle, type BorderStyle, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, type Color, type DimensionValue, FocusScope, type FocusScopeProps, type HexColor, Input, type InputProps, type Key, Keybind, type KeybindProps, type LayoutRect, List, type ListItemInfo, type ListProps, Menu, type MenuItem, type MenuProps, type NamedColor, Portal, type PortalProps, Progress, type ProgressProps, type RGBColor, Radio, type RadioItem, type RadioProps, type RenderOptions, ScrollView, type ScrollViewProps, Select, type SelectItem, type SelectProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, type Style, Text, type TextAlign, type TextProps, type Toast, ToastHost, type ToastHostProps, type ToastPosition, type ToastVariant, type WrapMode, render, useApp, useFocus, useInput, useLayout, useToast };