@visulima/tui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/ink/components/operation-tree.d.ts

@@ -0,0 +1,46 @@
+import type { ReactElement, ReactNode } from "react";
+export type OperationStatus = "completed" | "error" | "pending" | "running" | "skipped";
+export type OperationNode = {
+    /**
+     * Nested child operations rendered beneath this node.
+     */
+    readonly children?: ReadonlyArray<OperationNode>;
+    /**
+     * Optional supplementary info rendered on the next line (dimmed).
+     */
+    readonly details?: ReactNode;
+    /**
+     * Wall-clock duration in ms, displayed right-aligned.
+     */
+    readonly durationMs?: number;
+    /**
+     * Unique identifier within the tree.
+     */
+    readonly id: string;
+    /**
+     * Human-readable label.
+     */
+    readonly label: ReactNode;
+    /**
+     * Lifecycle state controlling icon + color.
+     */
+    readonly status: OperationStatus;
+};
+export type Props = {
+    /**
+     * Tree of operations. Each node can have its own children.
+     */
+    readonly nodes: ReadonlyArray<OperationNode>;
+    /**
+     * When true, runs the running-spinner animation.
+     * @default true
+     */
+    readonly showSpinner?: boolean;
+};
+/**
+ * Renders a tree of operations with per-node status. Perfect for agent
+ * progress panels (reading → editing → running tests → done).
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` rendering the nested tree of operation rows.
+ */
+export default function OperationTree({ nodes, showSpinner }: Props): ReactElement;

package/dist/ink/components/option-list.d.ts

@@ -0,0 +1,41 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement, ReactNode } from "react";
+import type { LiteralUnion } from "type-fest";
+export type OptionListEntry = {
+    readonly description?: string;
+    readonly icon?: ReactNode;
+    readonly id: string;
+    readonly label: ReactNode;
+    readonly trailing?: ReactNode;
+};
+export type Props = {
+    /**
+     * Highlight color for the row marked as current.
+     */
+    readonly accentColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Render the list with a border.
+     */
+    readonly bordered?: boolean;
+    /**
+     * Id of the row to highlight. No visual change if omitted.
+     */
+    readonly currentId?: string;
+    /**
+     * Icon width in characters for column alignment.
+     * @default 2
+     */
+    readonly iconColumnWidth?: number;
+    /**
+     * Entries to render.
+     */
+    readonly options: ReadonlyArray<OptionListEntry>;
+};
+/**
+ * Read-only presentational option list. Like `SelectInput` but without focus,
+ * input handling, or scrolling — just a styled list of rows. Useful inside
+ * modals, sidebars, or summary panels.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` rendering the list; bordered when requested.
+ */
+export default function OptionList({ accentColor, bordered, currentId, iconColumnWidth, options }: Props): ReactElement;

package/dist/ink/components/{Paginator.d.ts → paginator.d.ts}

@@ -14,29 +14,26 @@ export type Props<T> = {
     /**
      * Render-prop that receives the current page items and page metadata.
      */
-    readonly children: (pageItems: readonly T[], meta: PageMeta) => ReactNode;
+    readonly children: (pageItems: ReadonlyArray<T>, meta: PageMeta) => ReactNode;
     /**
      * Uncontrolled initial page (0-indexed).
-     *
      * @default 0
      */
     readonly defaultPage?: number;
     /**
      * Color for the active page indicator.
-     *
      * @default "cyan"
      */
     readonly indicatorColor?: string;
     /**
      * Whether keyboard navigation is active.
-     *
      * @default true
      */
     readonly isFocused?: boolean;
     /**
      * The full list of items to paginate.
      */
-    readonly items: readonly T[];
+    readonly items: ReadonlyArray<T>;
     /**
      * Called when the page changes.
      */
@@ -54,22 +51,9 @@ export type Props<T> = {
      * - `"dots"`: `● ○ ○ ○`
      * - `"numeric"`: `‹ 1 / 4 ›`
      * - `"fraction"`: `1/4`
-     *
      * @default "dots"
      */
     readonly style?: "dots" | "fraction" | "numeric";
 };
-/**
- * Paginator component with render-prop children and a page indicator.
- *
- * ```tsx
- * <Paginator items={allItems} pageSize={5}>
- *   {(pageItems, meta) => (
- *     <Box flexDirection="column">
- *       {pageItems.map((item, i) => <Text key={i}>{item}</Text>)}
- *     </Box>
- *   )}
- * </Paginator>
- * ```
- */
-export default function Paginator<T>({ children, defaultPage, indicatorColor, isFocused, items, onChange, page: controlledPage, pageSize, style, }: Props<T>): ReactElement;
+declare const Paginator: <T>({ children, defaultPage, indicatorColor, isFocused, items, onChange, page: controlledPage, pageSize, style, }: Props<T>) => ReactElement;
+export default Paginator;

package/dist/ink/components/paragraph.d.ts

@@ -0,0 +1,31 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement, ReactNode } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Paragraph body.
+     */
+    readonly children: ReactNode;
+    /**
+     * Foreground color.
+     */
+    readonly color?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Render the paragraph with dim color.
+     */
+    readonly dimColor?: boolean;
+    /**
+     * Blank lines to add after the paragraph.
+     * @default 1
+     */
+    readonly marginBottom?: number;
+    /**
+     * Blank lines to add before the paragraph.
+     * @default 0
+     */
+    readonly marginTop?: number;
+};
+/**
+ * Wraps body text with a trailing blank line. Useful for README-style layouts.
+ */
+export default function Paragraph({ children, color, dimColor, marginBottom, marginTop }: Props): ReactElement;

package/dist/ink/components/placeholder.d.ts

@@ -0,0 +1,47 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Whether to pulse the skeleton blocks (shimmer).
+     * @default true
+     */
+    readonly animated?: boolean;
+    /**
+     * Fill character used for each block.
+     * @default "█"
+     */
+    readonly character?: string;
+    /**
+     * Block color.
+     * @default "gray"
+     */
+    readonly color?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Milliseconds between pulses.
+     * @default 500
+     */
+    readonly interval?: number;
+    /**
+     * Number of skeleton rows to render.
+     * @default 3
+     */
+    readonly rows?: number;
+    /**
+     * Total width reference. When omitted, the block flexes to fill its
+     * parent.
+     */
+    readonly width?: number;
+    /**
+     * Relative widths of each row (0–1). The list is sampled cyclically.
+     * @default [1, 0.85, 0.6]
+     */
+    readonly widths?: ReadonlyArray<number>;
+};
+/**
+ * Skeleton loading indicator. Renders a stack of solid blocks whose widths
+ * vary to mimic text placeholders. Pair with `async` data fetching.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` rendering the skeleton rows.
+ */
+export default function Placeholder({ animated, character, color, interval, rows, width, widths, }: Props): ReactElement;

package/dist/ink/components/{ProgressBar.d.ts → progress-bar.d.ts}

@@ -8,7 +8,7 @@
  * Copyright (c) Frankie Bagnardi
  */
 import type { ReactElement } from "react";
-import type { Props as TextProps } from "./Text.d.ts";
+import type { Props as TextProps } from "./text.d.ts";
 export type Props = {
     /** Fill glyph repeated across the completed portion of the progress bar. Defaults to "█". */
     readonly character?: string;

package/dist/ink/components/radio-group.d.ts

@@ -0,0 +1,62 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement } from "react";
+import type { LiteralUnion } from "type-fest";
+export type RadioOption = {
+    readonly description?: string;
+    readonly key?: string;
+    readonly label: string;
+    readonly value: string;
+};
+export type Props = {
+    /**
+     * Accent color for the focused and selected indicator.
+     * @default "blue"
+     */
+    readonly accentColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Auto-focus when mounted.
+     */
+    readonly autoFocus?: boolean;
+    /**
+     * When true, moving focus with arrow keys immediately updates the selected
+     * value (and fires `onChange`). When false, focus moves independently and
+     * selection commits only on Space or Enter.
+     * @default true
+     */
+    readonly commitOnNavigate?: boolean;
+    /**
+     * Initial selected value when uncontrolled.
+     */
+    readonly defaultValue?: string;
+    /**
+     * Disable input and dim labels.
+     */
+    readonly isDisabled?: boolean;
+    /**
+     * Called when selection changes.
+     */
+    readonly onChange?: (value: string) => void;
+    /**
+     * Called when the user submits by pressing Enter.
+     */
+    readonly onSubmit?: (value: string) => void;
+    /**
+     * Available options.
+     */
+    readonly options: ReadonlyArray<RadioOption>;
+    /**
+     * Orientation of options.
+     * @default "vertical"
+     */
+    readonly orientation?: "horizontal" | "vertical";
+    /**
+     * Controlled selected value.
+     */
+    readonly value?: string;
+};
+/**
+ * Single-choice radio group with keyboard navigation. By default, navigation
+ * commits selection; set `commitOnNavigate={false}` to require an explicit
+ * Space/Enter commit.
+ */
+export default function RadioGroup({ accentColor, autoFocus, commitOnNavigate, defaultValue, isDisabled, onChange, onSubmit, options, orientation, value, }: Props): ReactElement;

package/dist/ink/components/scatter-plot.d.ts

@@ -0,0 +1,23 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement } from "react";
+import type { LiteralUnion } from "type-fest";
+import type { LineSeries } from "./line-chart.d.ts";
+export type Props = {
+    readonly axisColor?: LiteralUnion<AnsiColors, string>;
+    readonly height?: number;
+    readonly maxX?: number;
+    readonly maxY?: number;
+    readonly minX?: number;
+    readonly minY?: number;
+    readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+    readonly series: ReadonlyArray<LineSeries>;
+    readonly showLegend?: boolean;
+    readonly width?: number;
+};
+/**
+ * Scatter plot rendered on a braille pixel grid. Each sample lights one
+ * sub-cell pixel; overlapping points merge into denser braille glyphs.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` containing the plot and an optional legend.
+ */
+export default function ScatterPlot({ axisColor, height, maxX, maxY, minX, minY, palette, series, showLegend, width, }: Props): ReactElement;

package/dist/ink/components/scroll/{ControlledScrollView.d.ts → controlled-scroll-view.d.ts}

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ReactNode, Ref } from "react";
-import type { Props as BoxProps } from "../Box.d.ts";
+import type { Props as BoxProps } from "../box.d.ts";
 export interface ControlledScrollViewProps extends BoxProps {
     children?: ReactNode;
     debug?: boolean;

package/dist/ink/components/scroll/index.d.ts

@@ -1,10 +1,10 @@
-export type { ControlledScrollViewProps, ControlledScrollViewRef } from "./ControlledScrollView.d.ts";
-export { ControlledScrollView } from "./ControlledScrollView.d.ts";
-export type { ScrollBarPlacement, ScrollBarProps, ScrollBarStyle } from "./ScrollBar.d.ts";
-export { ScrollBar } from "./ScrollBar.d.ts";
-export type { ScrollBarBoxProps } from "./ScrollBarBox.d.ts";
-export { ScrollBarBox } from "./ScrollBarBox.d.ts";
-export type { ScrollAlignment, ScrollListProps, ScrollListRef } from "./ScrollList.d.ts";
-export { ScrollList } from "./ScrollList.d.ts";
-export type { ScrollViewProps, ScrollViewRef } from "./ScrollView.d.ts";
-export { ScrollView } from "./ScrollView.d.ts";
+export type { ControlledScrollViewProps, ControlledScrollViewRef } from "./controlled-scroll-view.d.ts";
+export { ControlledScrollView } from "./controlled-scroll-view.d.ts";
+export type { ScrollBarPlacement, ScrollBarProps, ScrollBarStyle } from "./scroll-bar.d.ts";
+export { ScrollBar } from "./scroll-bar.d.ts";
+export type { ScrollBarBoxProps } from "./scroll-bar-box.d.ts";
+export { ScrollBarBox } from "./scroll-bar-box.d.ts";
+export type { ScrollAlignment, ScrollListProps, ScrollListRef } from "./scroll-list.d.ts";
+export { ScrollList } from "./scroll-list.d.ts";
+export type { ScrollViewProps, ScrollViewRef } from "./scroll-view.d.ts";
+export { ScrollView } from "./scroll-view.d.ts";

package/dist/ink/components/scroll/{ScrollBarBox.d.ts → scroll-bar-box.d.ts}

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { Props as BoxProps } from "../Box.d.ts";
+import type { Props as BoxProps } from "../box.d.ts";
 interface ScrollBarBoxProps extends BoxProps {
     children?: React.ReactNode;
     contentHeight: number;

package/dist/ink/components/scroll/{ScrollBar.d.ts → scroll-bar.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Props as BoxProps } from "../Box.d.ts";
+import type { Props as BoxProps } from "../box.d.ts";
 type ScrollBarPlacement = "inset" | "left" | "right";
 type ScrollBarStyle = BoxProps["borderStyle"] | "block" | "line" | "thick" | "dots";
 interface ScrollBarProps {

package/dist/ink/components/scroll/{ScrollList.d.ts → scroll-list.d.ts}

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { Ref } from "react";
-import type { ScrollViewProps, ScrollViewRef } from "./ScrollView.d.ts";
+import type { ScrollViewProps, ScrollViewRef } from "./scroll-view.d.ts";
 export type ScrollAlignment = "auto" | "bottom" | "center" | "top";
 export interface ScrollListProps extends ScrollViewProps {
     readonly scrollAlignment?: ScrollAlignment;

package/dist/ink/components/scroll/{ScrollView.d.ts → scroll-view.d.ts}

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ReactNode, Ref } from "react";
-import type { Props as BoxProps } from "../Box.d.ts";
+import type { Props as BoxProps } from "../box.d.ts";
 export interface ScrollViewProps extends BoxProps {
     children?: ReactNode;
     debug?: boolean;

package/dist/ink/components/search-input.d.ts

@@ -0,0 +1,46 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement, ReactNode } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Color of the accent elements (border, icon).
+     * @default "blue"
+     */
+    readonly accentColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Initial value.
+     */
+    readonly defaultValue?: string;
+    /**
+     * Optional icon rendered before the input.
+     * @default "⌕"
+     */
+    readonly icon?: ReactNode;
+    /**
+     * Disable the input.
+     */
+    readonly isDisabled?: boolean;
+    /**
+     * Fired whenever the value changes.
+     */
+    readonly onChange?: (value: string) => void;
+    /**
+     * Fired when the user presses Enter.
+     */
+    readonly onSubmit?: (value: string) => void;
+    /**
+     * Placeholder text shown when the input is empty.
+     * @default "Search..."
+     */
+    readonly placeholder?: string;
+    /**
+     * Autocomplete suggestions.
+     */
+    readonly suggestions?: ReadonlyArray<string>;
+};
+/**
+ * Search-styled text input with an icon and bordered container.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` wrapping `TextInput` with an icon column.
+ */
+export default function SearchInput({ accentColor, defaultValue, icon, isDisabled, onChange, onSubmit, placeholder, suggestions, }: Props): ReactElement;

package/dist/ink/components/{SelectInput.d.ts → select-input.d.ts}

@@ -1,8 +1,8 @@
 import type { AnsiColors } from "@visulima/colorize";
 import type { FC, ReactElement } from "react";
 import type { LiteralUnion } from "type-fest";
-import type { Props as IndicatorProps } from "./SelectInputIndicator.d.ts";
-import type { Props as ItemProps } from "./SelectInputItem.d.ts";
+import type { Props as IndicatorProps } from "./select-input-indicator.d.ts";
+import type { Props as ItemProps } from "./select-input-item.d.ts";
 export type Item<V> = {
     /**
      * Called automatically when this item is selected (via Enter or number key).

package/dist/ink/components/shimmer-text.d.ts

@@ -0,0 +1,39 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Width of the highlighted band in characters.
+     * @default 3
+     */
+    readonly bandWidth?: number;
+    /**
+     * Base color of the non-highlighted text.
+     */
+    readonly color?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Highlight color of the sweeping band.
+     * @default "white"
+     */
+    readonly highlightColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Milliseconds between frames of the shimmer.
+     * @default 60
+     */
+    readonly interval?: number;
+    /**
+     * Text to render with a shimmer sweep.
+     */
+    readonly text: string;
+};
+/**
+ * Text with an animated highlight band that sweeps across the characters.
+ * Perfect for "generating…" states.
+ * @param props.bandWidth Number of characters in the bright band.
+ * @param props.color Color applied to characters outside the band.
+ * @param props.highlightColor Color applied to characters inside the band.
+ * @param props.interval Milliseconds between frames.
+ * @param props.text Content to shimmer.
+ * @returns A single `Text` element composed of per-character `Text` children.
+ */
+export default function ShimmerText({ bandWidth, color, highlightColor, interval, text }: Props): ReactElement;

package/dist/ink/components/sparkline.d.ts

@@ -0,0 +1,30 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Color applied to the chart glyphs.
+     */
+    readonly color?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Data points to plot. Values may be any real numbers.
+     */
+    readonly data: ReadonlyArray<number>;
+    /**
+     * Optional fixed maximum for the vertical scale.
+     * When omitted the maximum data value is used.
+     */
+    readonly max?: number;
+    /**
+     * Optional fixed minimum for the vertical scale.
+     * When omitted the minimum data value is used.
+     */
+    readonly min?: number;
+};
+/**
+ * Inline bar chart using Unicode block glyphs.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` containing the glyph string, or `null` when
+ * `data` is empty.
+ */
+export default function Sparkline({ color, data, max, min }: Props): ReactElement | null;

package/dist/ink/components/{Spinner.d.ts → spinner.d.ts}

@@ -24,19 +24,17 @@
  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import type { SpinnerName } from "cli-spinners";
+import type { SpinnerName } from "@visulima/spinner";
 import type { ReactElement } from "react";
 export type Props = {
     /**
      * Type of a spinner.
-     * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
+     * Accepts any preset from `@visulima/spinner` (cli-spinners + custom frame sets).
      * @default "dots"
      */
     readonly type?: SpinnerName;
 };
 /**
  * Spinner component that renders an animated loading indicator.
- *
- * Uses spinners from [cli-spinners](https://github.com/sindresorhus/cli-spinners).
  */
 export default function Spinner({ type }: Props): ReactElement;

package/dist/ink/components/{StaticRender.d.ts → static-render.d.ts}

@@ -10,19 +10,31 @@
  * is ready, the component stops calling the function so React does not
  * re-reconcile the subtree on subsequent renders.
  *
+ * Re-rendering the cached content is controlled via the `deps` prop (similar
+ * to React's hook deps). When `deps` changes, the cache is invalidated and
+ * `children()` is invoked again. If `deps` is omitted, the cache is
+ * invalidated whenever the `children` function reference changes.
+ *
  * Use this for content that renders once and doesn't change (e.g., completed
  * task output, logged messages, static headers).
  *
  * Ported from jacob314/ink (Google LLC, Apache-2.0).
  * @license Apache-2.0
  */
-import type { ReactNode } from "react";
+import type { DependencyList, ReactNode } from "react";
 import React from "react";
 import type { Styles } from "../styles.d.ts";
+/**
+ * @property children Render function invoked once to produce the cached content.
+ * @property deps Dependencies that control when the static content is re-rendered. When any dependency changes (shallow, Object.is comparison), the cache is invalidated and children() is invoked again. If omitted, the cache is invalidated whenever the children function reference changes.
+ * @property style Optional style applied to the static-render container.
+ * @property width Optional fixed width for the cached region.
+ */
 export type Props = {
     readonly children: () => ReactNode;
+    readonly deps?: DependencyList;
     readonly style?: Styles;
     readonly width?: number;
 };
-declare const StaticRender: ({ children, style, width }: Props) => React.ReactNode;
+declare const StaticRender: ({ children, deps, style, width }: Props) => React.ReactNode;
 export default StaticRender;

package/dist/ink/components/status-line.d.ts

@@ -0,0 +1,30 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement, ReactNode } from "react";
+import type { LiteralUnion } from "type-fest";
+export type Props = {
+    /**
+     * Background color spanning the whole row.
+     */
+    readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Content rendered in the center. Optional.
+     */
+    readonly center?: ReactNode;
+    /**
+     * Default foreground for text rendered inside the row.
+     */
+    readonly color?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Content rendered flush-left.
+     */
+    readonly left?: ReactNode;
+    /**
+     * Content rendered flush-right.
+     */
+    readonly right?: ReactNode;
+};
+/**
+ * Full-width status bar with left / center / right slots. Typically pinned to
+ * the bottom of the UI.
+ */
+export default function StatusLine({ backgroundColor, center, color, left, right }: Props): ReactElement;

package/dist/ink/components/stepper.d.ts

@@ -0,0 +1,42 @@
+import type { AnsiColors } from "@visulima/colorize";
+import type { ReactElement, ReactNode } from "react";
+import type { LiteralUnion } from "type-fest";
+export type StepStatus = "active" | "completed" | "error" | "pending";
+export type StepperStep = {
+    readonly description?: string;
+    readonly key?: string;
+    readonly label: ReactNode;
+    readonly status?: StepStatus;
+};
+export type Props = {
+    /**
+     * Color used for active and completed steps.
+     * @default "blue"
+     */
+    readonly accentColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Index of the current step (used when steps do not provide a status).
+     * @default 0
+     */
+    readonly activeIndex?: number;
+    /**
+     * Color used for errors.
+     * @default "red"
+     */
+    readonly errorColor?: LiteralUnion<AnsiColors, string>;
+    /**
+     * Orientation of the stepper.
+     * @default "horizontal"
+     */
+    readonly orientation?: "horizontal" | "vertical";
+    /**
+     * List of steps.
+     */
+    readonly steps: ReadonlyArray<StepperStep>;
+};
+/**
+ * Step indicator for multi-stage flows.
+ * @param props See {@link Props}.
+ * @returns A `ReactElement` rendering the steps horizontally or vertically.
+ */
+export default function Stepper({ accentColor, activeIndex, errorColor, orientation, steps }: Props): ReactElement;