@visulima/tui 1.0.0-alpha.9 → 1.0.1

package/dist/components/select-input-item.d.ts

@@ -0,0 +1,41 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the label when selected.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color of the label when not selected.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Whether the parent SelectInput has focus.
+  * When `false`, the selected item is dimmed.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Whether this item is currently selected.
+  * @default false
+  */
+  readonly isSelected?: boolean;
+  /**
+  * Text label to display for this item.
+  */
+  readonly label: string;
+};
+/**
+* Renders an item label, using `accentColor` when selected and `defaultColor` otherwise.
+* When unfocused, selected items are rendered with `dimColor`.
+*/
+declare function SelectInputItem({
+  accentColor,
+  defaultColor,
+  isFocused,
+  isSelected,
+  label
+}: Props): ReactElement;
+export { Props, SelectInputItem, type Props as SelectInputItemProps, SelectInputItem as default };

package/dist/components/select-input-item.js

@@ -0,0 +1 @@
+import{jsx as a}from"react/jsx-runtime";import{Text as c}from"./text.js";function i({accentColor:o="blue",defaultColor:t,isFocused:l=!0,isSelected:e=!1,label:r}){return a(c,{color:e?o:t,dimColor:e&&!l,children:r})}export{i as SelectInputItem,i as default};

package/dist/components/select-input.d.ts

@@ -0,0 +1,110 @@
+import { AnsiColors } from '@visulima/colorize';
+import { FC, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { Props as Props$1 } from "./select-input-indicator.js";
+import { Props as Props$2 } from "./select-input-item.js";
+type Item<V> = {
+  /**
+  * Called automatically when this item is selected (via Enter or number key).
+  * Fires after `onSelect`. Useful for defining per-item behavior inline.
+  */
+  readonly action?: () => void;
+  readonly key?: string;
+  readonly label: string;
+  readonly value: V;
+};
+type SeparatorItem = {
+  /**
+  * Marks this entry as a non-focusable separator line.
+  */
+  readonly isSeparator: true;
+  readonly key?: string;
+  /**
+  * Custom separator text. Defaults to `"───"`.
+  */
+  readonly label?: string;
+};
+type SelectInputEntry<V> = Item<V> | SeparatorItem;
+type Props<V> = {
+  /**
+  * Color used for the selected item and indicator.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color used for unselected items.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Controlled selected index. When provided, the component becomes controlled
+  * and `initialIndex` is ignored. Update this value in the `onHighlight` callback
+  * to track selection externally. If the index points to a separator, the nearest
+  * selectable item is highlighted instead.
+  */
+  readonly index?: number;
+  /**
+  * Custom component to override the default indicator component.
+  */
+  readonly indicatorComponent?: FC<Props$1>;
+  /**
+  * Index of initially-selected item in `items` array.
+  * Ignored when `index` is provided.
+  * When omitted (`undefined`), no item is highlighted until the user presses a key.
+  * If the index points to a separator, the nearest selectable item is used.
+  */
+  readonly initialIndex?: number;
+  /**
+  * Whether the input is focused. Useful for when there are multiple
+  * inputs on the screen and you need to control which one captures input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Custom component to override the default item component.
+  */
+  readonly itemComponent?: FC<Props$2>;
+  /** @default [] */
+  readonly items?: ReadonlyArray<SelectInputEntry<V>>;
+  /**
+  * Number of visible items. Useful if the list is long and you want
+  * to limit the display with a scrolling window.
+  */
+  readonly limit?: number;
+  /**
+  * Called when the user highlights a new item via arrow keys or `j`/`k`.
+  * The second argument is the index of the highlighted item in the visible list.
+  */
+  readonly onHighlight?: (item: Item<V>, index: number) => void;
+  /**
+  * Called when the user selects an item via Enter or a number key (1-9).
+  */
+  readonly onSelect?: (item: Item<V>) => void;
+  /**
+  * Whether to reset the selection when items change.
+  * Set to `false` to preserve the current selection across item updates.
+  * @default true
+  */
+  readonly resetOnItemsChange?: boolean;
+};
+/**
+* A select input component for terminal UIs.
+*
+* Renders a list of items with an indicator showing the currently highlighted item.
+* Users can navigate with arrow keys or `j`/`k`, select with Enter, or jump to an
+* item by pressing a number key (1-9).
+*/
+declare function SelectInput<V>({
+  accentColor,
+  defaultColor,
+  index,
+  indicatorComponent,
+  initialIndex,
+  isFocused,
+  itemComponent,
+  items,
+  limit: customLimit,
+  onHighlight,
+  onSelect,
+  resetOnItemsChange
+}: Props<V>): ReactElement;
+export { Item, Props, SelectInput, SelectInputEntry, type Item as SelectInputItemType, type Props as SelectInputProps, type SeparatorItem as SelectInputSeparator, SeparatorItem, SelectInput as default };

package/dist/components/select-input.js

@@ -0,0 +1 @@
+import{createRequire as ee}from"node:module";import{jsx as F,jsxs as re}from"react/jsx-runtime";import{useReducer as se,useRef as v,useMemo as ce,useEffect as V,useCallback as R,createElement as X}from"react";import ie from"../ink/hooks/use-input.js";import ae from"../ink/hooks/use-window-size.js";import{Box as D}from"./box.js";import{SelectInputIndicator as le}from"./select-input-indicator.js";import{SelectInputItem as de}from"./select-input-item.js";import{Text as ue}from"./text.js";const te=ee(import.meta.url),M=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,ne=n=>{if(typeof M<"u"&&M.versions&&M.versions.node){const[t,o]=M.versions.node.split(".").map(Number);if(t>22||t===22&&o>=3||t===20&&o>=16)return M.getBuiltinModule(n)}return te(n)},{isDeepStrictEqual:oe}=ne("node:util"),h=n=>"isSeparator"in n&&n.isSeparator,fe=[],pe=/^[1-9]$/,l=-1,me="───",Ie=Symbol("separator"),xe=(n,t)=>{switch(t.type){case"navigate":return{rotateIndex:t.rotateIndex,selectedIndex:t.selectedIndex};case"reset":return{rotateIndex:0,selectedIndex:t.hasInitialSelection?t.initialIndex:l};case"set":return{rotateIndex:t.selectedIndex,selectedIndex:t.selectedIndex};default:return n}},ge=(n,t)=>{const{length:o}=n;if(o===0)return[];const u=(t%o+o)%o;return[...n.slice(u),...n.slice(0,u)]},b=(n,t,o,u)=>t?ge(n,o).slice(0,u):n,q=(n,t,o)=>{const{length:u}=n;for(let S=0;S<u;S+=1){const C=((t+(S+1)*o)%u+u)%u;if(!h(n[C]))return C}return l},Y=(n,t)=>{if(t<0||t>=n.length)return l;const o=n[t];return o&&!h(o)?t:q(n,t-1,1)};function Me({accentColor:n="blue",defaultColor:t,index:o,indicatorComponent:u=le,initialIndex:S,isFocused:C=!0,itemComponent:Z=de,items:r=fe,limit:E,onHighlight:f,onSelect:N,resetOnItemsChange:B=!0}){const{rows:Q}=ae(),H=typeof E=="number"?E:Q,s=r.length>H,d=s?Math.min(H,r.length):r.length,j=d-1,O=typeof o=="number"||typeof S=="number",P=typeof o=="number"?o:S??l,w=P===l?l:Y(r,Math.min(P,j)),[T,_]=se(xe,{rotateIndex:w>j?j-w:0,selectedIndex:w}),z=v(O),G=v(w),J=v(T);J.current=T;const A=v(N);A.current=N;const W=v(r),k=ce(()=>r.map(e=>h(e)?Ie:e.value),[r]),K=v(k);z.current=O,G.current=w,V(()=>{B&&!oe(K.current,k)&&_({hasInitialSelection:z.current,initialIndex:G.current,type:"reset"}),K.current=k,W.current=r},[r,k,B]),V(()=>{if(typeof o=="number"){const e=Y(r,Math.min(o,j));_({selectedIndex:e===l?0:e,type:"set"})}},[o,r,j]);const L=R((e,c)=>{const i=b(r,s,e,d);if(c===l){const x=q(i,0,-1);if(x===l)return;_({rotateIndex:e,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(i[x],x);return}const g=(s?d:r.length)-1,a=c===0,p=a?g:c-1,m=a&&s?e+1:e,y=b(r,s,m,d),I=h(y[p])?q(y,p,-1):p;I!==l&&(_({rotateIndex:m,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(y[I],I))},[s,d,r,f]),U=R((e,c)=>{const i=b(r,s,e,d);if(c===l){const x=q(i,i.length-1,1);if(x===l)return;_({rotateIndex:e,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(i[x],x);return}const g=(s?d:r.length)-1,a=c===g,p=a?0:c+1,m=a&&s?e-1:e,y=b(r,s,m,d),I=h(y[p])?q(y,p,1):p;I!==l&&(_({rotateIndex:m,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(y[I],I))},[s,d,r,f]);ie(R((e,c)=>{const{rotateIndex:i,selectedIndex:g}=J.current;if((e==="k"||c.upArrow)&&L(i,g),(e==="j"||c.downArrow)&&U(i,g),pe.test(e)){const a=Number.parseInt(e,10)-1,p=b(r,s,i,d);if(a>=0&&a<p.length){const m=p[a];m&&!h(m)&&(A.current?.(m),m.action?.())}}if(c.return&&g!==l){const a=b(r,s,i,d)[g];a&&!h(a)&&(A.current?.(a),a.action?.())}},[L,U,s,d,r]),{isActive:C});const $=b(r,s,T.rotateIndex,d);return F(D,{flexDirection:"column",children:$.map((e,c)=>{if(h(e))return F(D,{children:F(ue,{dimColor:!0,children:e.label??me})},e.key??`separator-${String(c)}`);const i=c===T.selectedIndex;return re(D,{children:[X(u,{accentColor:n,isFocused:C,isSelected:i}),X(Z,{...e,accentColor:n,defaultColor:t,isFocused:C,isSelected:i})]},e.key??String(e.value))})})}export{Me as SelectInput,Me as default};

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

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+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 Component props.
+* @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.
+*/
+declare function ShimmerText({
+  bandWidth,
+  color,
+  highlightColor,
+  interval,
+  text
+}: Props): ReactElement;
+export { Props, ShimmerText, type Props as ShimmerTextProps, ShimmerText as default };

package/dist/components/shimmer-text.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useMemo as f}from"react";import g from"../ink/hooks/use-animation.js";import{Text as i}from"./text.js";function j({bandWidth:m=3,color:r,highlightColor:a="white",interval:d=60,text:n}){const{frame:u}=g({interval:d}),t=f(()=>[...n],[n]),l=t.length,p=l+m,x=l===0?0:u%p,b=f(()=>t.map((o,c)=>e(i,{color:r,dimColor:r===void 0,children:o},c)),[t,r]);if(l===0)return e(i,{color:r,children:n});const h=[];for(const[o,c]of t.entries()){const s=x-o;if(!(s>=0&&s<m)){h.push(b[o]);continue}h.push(e(i,{bold:!0,color:a,children:c},`band-${o}`))}return e(i,{children:h})}export{j as ShimmerText,j as default};

package/dist/components/slider.d.ts

@@ -0,0 +1,103 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the filled portion of the track and thumb.
+  * @default "green"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color for the empty portion of the track.
+  * @default "gray"
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initial value when uncontrolled.
+  * @default 0
+  */
+  readonly defaultValue?: number;
+  /**
+  * Character used for the empty portion of the track.
+  * @default "░"
+  */
+  readonly emptyCharacter?: string;
+  /**
+  * Character used for the filled portion of the track.
+  * @default "█"
+  */
+  readonly filledCharacter?: string;
+  /**
+  * When true, all input is ignored and the slider is dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * When true, the component responds to keyboard input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum value.
+  * @default 100
+  */
+  readonly max?: number;
+  /**
+  * Minimum value.
+  * @default 0
+  */
+  readonly min?: number;
+  /**
+  * Fires whenever the value changes.
+  */
+  readonly onChange?: (value: number) => void;
+  /**
+  * Layout direction of the slider.
+  * @default "horizontal"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * Increment size for arrow key presses.
+  * @default 1
+  */
+  readonly step?: number;
+  /**
+  * Character used to indicate the current position.
+  * @default "●"
+  */
+  readonly thumbCharacter?: string;
+  /**
+  * Controlled value. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: number;
+  /**
+  * Width of the slider track in columns (horizontal) or rows (vertical).
+  * @default 20
+  */
+  readonly width?: number;
+};
+/**
+* A keyboard-driven slider / range input.
+*
+* ```tsx
+* &lt;Slider defaultValue={50} min={0} max={100} onChange={setValue} />
+* ```
+*/
+declare function Slider({
+  accentColor,
+  defaultColor,
+  defaultValue,
+  emptyCharacter,
+  filledCharacter,
+  isDisabled,
+  isFocused,
+  max,
+  min,
+  onChange,
+  orientation,
+  step,
+  thumbCharacter,
+  value: controlledValue,
+  width
+}: Props): ReactElement;
+export { Props, Slider, type Props as SliderProps, Slider as default };

package/dist/components/slider.js

@@ -0,0 +1 @@
+import{jsx as c,jsxs as H}from"react/jsx-runtime";import{useState as R,useRef as I,useCallback as J}from"react";import T from"../ink/hooks/use-input.js";import{Box as A}from"./box.js";import{Text as C}from"./text.js";const y=(u,d,x)=>Math.min(x,Math.max(d,u));function P({accentColor:u="green",defaultColor:d="gray",defaultValue:x=0,emptyCharacter:D="░",filledCharacter:j="█",isDisabled:e=!1,isFocused:K=!0,max:k=100,min:z=0,onChange:F,orientation:h="horizontal",step:m=1,thumbCharacter:N="●",value:q,width:L=20}){const o=Math.min(z,k),i=Math.max(z,k),b=q!==void 0,[O,Q]=R(y(x,o,i)),v=b?y(q,o,i):O,G=I(F);G.current=F;const s=I(v);s.current=v;const n=J(t=>{const r=y(t,o,i);b||Q(r),G.current?.(r)},[o,i,b]),w=m*10,f=i-o,S=J((t,r)=>{const M=h==="horizontal"?r.rightArrow:r.upArrow,p=h==="horizontal"?r.leftArrow:r.downArrow;if(M){n(s.current+m);return}if(p){n(s.current-m);return}if(r.pageUp){n(s.current+w);return}if(r.pageDown){n(s.current-w);return}if(r.home){n(o);return}if(r.end){n(i);return}if(t>="0"&&t<="9"){const E=Number.parseInt(t,10)/10;n(o+f*E)}},[m,w,o,i,f,h,n]);T(S,{isActive:K&&!e});const g=Math.max(1,L),V=f===0?0:(v-o)/f,l=Math.round(V*(g-1));if(h==="vertical"){const t=[];for(let r=g-1;r>=0;r--){const M=r===l,p=r<=l;t.push(c(A,{children:c(C,{color:e?void 0:p?u:d,dimColor:e,children:M?N:p?j:D})},r))}return c(A,{flexDirection:"column",children:t})}let a="";for(let t=0;t<g;t++)t===l?a+=N:t<l?a+=j:a+=D;const W=a.slice(0,l),$=a[l]??"",B=a.slice(l+1);return H(A,{children:[c(C,{color:e?void 0:u,dimColor:e,children:W}),c(C,{bold:!0,color:e?void 0:u,dimColor:e,children:$}),c(C,{color:e?void 0:d,dimColor:e,children:B})]})}export{P as Slider,P as default};

package/dist/components/spacer.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+/**
+* A flexible space that expands along the major axis of its containing layout.
+*
+* It's useful as a shortcut for filling all the available space between elements.
+*/
+declare function Spacer(): ReactElement;
+export { Spacer, Spacer as default };

package/dist/components/spacer.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{Box as o}from"./box.js";function a(){return r(o,{flexGrow:1})}export{a as Spacer,a as default};

package/dist/components/sparkline.d.ts

@@ -0,0 +1,35 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+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.
+* @returns A `ReactElement` containing the glyph string, or `null` when
+* `data` is empty.
+*/
+declare function Sparkline({
+  color,
+  data,
+  max,
+  min
+}: Props): ReactElement | null;
+export { Props, Sparkline, type Props as SparklineProps, Sparkline as default };

package/dist/components/sparkline.js

@@ -0,0 +1 @@
+import{jsx as f}from"react/jsx-runtime";import{useMemo as s}from"react";import{Text as c}from"./text.js";const e="▁▂▃▄▅▆▇█",I=(m,t,o)=>{if(o===0)return e[0];const r=(m-t)/o,n=Math.max(0,Math.min(e.length-1,Math.floor(r*e.length)));return e[n]},h=(m,t,o)=>{let r=t??Number.POSITIVE_INFINITY,n=o??Number.NEGATIVE_INFINITY;if(t===void 0||o===void 0)for(const i of m)t===void 0&&i<r&&(r=i),o===void 0&&i>n&&(n=i);return{max:n,min:r}};function p({color:m,data:t,max:o,min:r}){const n=s(()=>{if(t.length===0)return"";const{max:i,min:a}=h(t,r,o),l=i-a;return t.map(u=>I(u,a,l)).join("")},[t,r,o]);return n.length===0?null:f(c,{color:m,children:n})}export{p as Sparkline,p as default};

package/dist/components/spinner.d.ts

@@ -0,0 +1,17 @@
+import { SpinnerName } from '@visulima/spinner';
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * Type of a spinner.
+  * Accepts any preset from `@visulima/spinner` (cli-spinners + custom frame sets).
+  * @default "dots"
+  */
+  readonly type?: SpinnerName;
+};
+/**
+* Spinner component that renders an animated loading indicator.
+*/
+declare function Spinner({
+  type
+}: Props): ReactElement;
+export { Props, Spinner, type Props as SpinnerProps, Spinner as default };

package/dist/components/spinner.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{getSpinner as e}from"@visulima/spinner";import m from"../ink/hooks/use-animation.js";import{Text as p}from"./text.js";function d({type:n="dots"}){const r=e(n)??e("dots"),t=r?.frames??[" "],{frame:o}=m({interval:r?.interval??80});return i(p,{children:t[o%t.length]})}export{d as Spinner,d as default};

package/dist/components/static-render.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode, DependencyList } from 'react';
+import { D as DOMElement } from "../packem_shared/dom.d-B4kXbaVY.js";
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import 'type-fest';
+
+/**
+* StaticRender component — pre-renders children once and caches the result.
+*
+* When mounted, StaticRender renders its children into a Region via
+* prepareYogaTree() in the Ink layout phase, then caches the result on the
+* DOM node. On subsequent renders, the cached Region is composited directly
+* via addRegionTree(), skipping the entire subtree traversal.
+*
+* Children are passed as a render function `() => ReactNode`. Once the cache
+* 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
+*/
+
+/**
+* @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 onRender Callback fired after the static content has been rendered and cached. The node's cachedRender holds the measured width/height — useful for reacting to the cached block's size without setting up a full ResizeObserver.
+* @property style Optional style applied to the static-render container.
+* @property width Optional fixed width for the cached region.
+*/
+type Props = {
+  readonly children: () => ReactNode;
+  readonly deps?: DependencyList;
+  readonly onRender?: (node: DOMElement) => void;
+  readonly style?: Styles;
+  readonly width?: number;
+};
+declare const StaticRender: ({
+  children,
+  deps,
+  onRender,
+  style,
+  width
+}: Props) => React.ReactNode;
+export { Props, StaticRender, type Props as StaticRenderProps, StaticRender as default };

package/dist/components/static-render.js

@@ -0,0 +1 @@
+import{jsx as R}from"react/jsx-runtime";import{useRef as c,useLayoutEffect as m,useEffect as p,useMemo as v}from"react";const y=(e,r)=>{if(e===r)return!0;if(!e||!r||e.length!==r.length)return!1;for(const[u,s]of e.entries())if(!Object.is(s,r[u]))return!1;return!0},w=({children:e,deps:r,onRender:u,style:s,width:i})=>{const n=c(null),o=c(!1),f=c(r),l=c(e),a=c(u);a.current=u;let d=!1;r!==void 0?y(f.current,r)||(d=!0,f.current=r):e!==l.current&&(d=!0,l.current=e),d&&(o.current=!1,n.current&&(n.current.cachedRender=void 0)),m(()=>{const t=n.current;t&&(t.internal_onRendered=()=>{o.current=!0,a.current?.(t)})}),p(()=>()=>{const t=n.current;t&&(t.cachedRender=void 0,t.internal_onRendered=void 0)},[]);const h=v(()=>({...s,width:i}),[s,i]);return R("ink-static-render",{ref:n,style:h,children:o.current?null:e()})};export{w as StaticRender,w as default};

package/dist/components/static.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, ReactElement } from 'react';
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import 'type-fest';
+import 'yoga-layout';
+type Props<T> = {
+  /**
+  * Function that is called to render every item in the `items` array. The first argument is the item itself, and the second argument is the index of that item in the `items` array. Note that a `key` must be assigned to the root component.
+  */
+  readonly children: (item: T, index: number) => ReactNode;
+  /**
+  * Array of items of any type to render using the function you pass as a component child.
+  */
+  readonly items: T[];
+  /**
+  * Styles to apply to a container of child elements. See &lt;Box> for supported properties.
+  */
+  readonly style?: Styles;
+};
+/**
+* `&lt;Static>` component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs—things that don't change after they're rendered (hence the name "Static").
+*
+* It's preferred to use `&lt;Static>` for use cases like these when you can't know or control the number of items that need to be rendered.
+*
+* For example, [Tap](https://github.com/tapjs/node-tap) uses `&lt;Static>` to display a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it to display a list of generated pages while still displaying a live progress bar.
+*/
+declare function Static<T>(props: Props<T>): ReactElement;
+export { Props, Static, type Props as StaticProps, Static as default };

package/dist/components/static.js

@@ -0,0 +1 @@
+import{jsx as f}from"react/jsx-runtime";import{useState as p,useMemo as i,useLayoutEffect as h}from"react";function y(s){const{children:n,items:t,style:o}=s,[e,l]=p(0),c=i(()=>t.slice(e),[t,e]);h(()=>{l(t.length)},[t.length]);const r=c.map((u,m)=>n(u,e+m)),a=i(()=>({flexDirection:"column",position:"absolute",...o}),[o]);return f("ink-box",{internal_static:!0,style:a,children:r})}export{y as Static,y as default};

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

@@ -0,0 +1,37 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+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.
+*/
+declare function StatusLine({
+  backgroundColor,
+  center,
+  color,
+  left,
+  right
+}: Props): ReactElement;
+export { Props, StatusLine, type Props as StatusLineProps, StatusLine as default };

package/dist/components/status-line.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as t}from"react/jsx-runtime";import{Box as i}from"./box.js";import{Text as c}from"./text.js";const e=(r,o)=>{if(r!==void 0)return typeof r=="string"||typeof r=="number"?t(c,{color:o,children:r}):r};function u({backgroundColor:r,center:o,color:n,left:d,right:f}){return l(i,{backgroundColor:r,paddingX:1,width:"100%",children:[t(i,{flexGrow:1,flexShrink:1,minWidth:0,children:e(d,n)}),o===void 0?void 0:t(i,{flexGrow:0,flexShrink:0,justifyContent:"center",children:e(o,n)}),t(i,{flexGrow:1,flexShrink:1,justifyContent:"flex-end",minWidth:0,children:e(f,n)})]})}export{u as StatusLine,u as default};

package/dist/components/status-message.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "../packem_shared/variant-config.d-D5NnrrQK.js";
+type StatusMessageVariant = Variant;
+type Props = {
+  /**
+  * Message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Determines the icon and color of the status message.
+  */
+  readonly variant: StatusMessageVariant;
+};
+/**
+* Renders a status notification with a colored icon and message text.
+*/
+declare function StatusMessage({
+  children,
+  variant
+}: Props): ReactElement;
+export { Props, StatusMessage, type Props as StatusMessageProps, StatusMessageVariant, StatusMessage as default };

package/dist/components/status-message.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as o}from"react/jsx-runtime";import{Box as e}from"./box.js";import{Text as r}from"./text.js";import{o as c}from"../packem_shared/variant-config-BJqpNo7H.js";function d({children:s,variant:t}){const{color:a,icon:i}=c[t];return n(e,{gap:1,children:[o(r,{color:a,children:i}),o(r,{children:s})]})}export{d as StatusMessage,d as default};

package/dist/components/stepper.d.ts

@@ -0,0 +1,48 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type StepStatus = "active" | "completed" | "error" | "pending";
+type StepperStep = {
+  readonly description?: string;
+  readonly key?: string;
+  readonly label: ReactNode;
+  readonly status?: StepStatus;
+};
+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.
+* @returns A `ReactElement` rendering the steps horizontally or vertically.
+*/
+declare function Stepper({
+  accentColor,
+  activeIndex,
+  errorColor,
+  orientation,
+  steps
+}: Props): ReactElement;
+export { Props, StepStatus, Stepper, type Props as StepperProps, StepperStep, Stepper as default };

package/dist/components/stepper.js

@@ -0,0 +1 @@
+import{jsx as i,jsxs as d}from"react/jsx-runtime";import{Fragment as v}from"react";import{Box as n}from"./box.js";import{Text as l}from"./text.js";const h={active:"●",completed:"✔",error:"✖",pending:"○"},u=(t,c,m)=>t.status!==void 0?t.status:c<m?"completed":c===m?"active":"pending";function k({accentColor:t="blue",activeIndex:c=0,errorColor:m="red",orientation:g="horizontal",steps:a}){return g==="vertical"?i(n,{flexDirection:"column",children:a.map((r,o)=>{const e=u(r,o,c),p=o===a.length-1,s=e==="error"?m:e==="pending"?void 0:t;return d(n,{flexDirection:"column",children:[d(n,{children:[d(l,{color:s,dimColor:e==="pending",children:[h[e]," "]}),i(l,{bold:e==="active",color:s,dimColor:e==="pending",children:r.label})]}),r.description===void 0?void 0:i(n,{marginLeft:2,children:i(l,{dimColor:!0,children:r.description})}),p?void 0:i(n,{marginLeft:0,children:i(l,{dimColor:!0,children:"│"})})]},r.key??o)})}):i(n,{children:a.map((r,o)=>{const e=u(r,o,c),p=e==="error"?m:e==="pending"?void 0:t,s=o===a.length-1;return d(v,{children:[d(n,{children:[d(l,{color:p,dimColor:e==="pending",children:[h[e]," "]}),i(l,{bold:e==="active",color:p,dimColor:e==="pending",children:r.label})]}),s?void 0:i(l,{dimColor:!0,children:" ── "})]},r.key??o)})})}export{k as Stepper,k as default};

package/dist/components/stopwatch.d.ts

@@ -0,0 +1,49 @@
+import { Ref, ReactElement } from 'react';
+import { UseStopwatchResult } from "../ink/hooks/use-stopwatch.js";
+type StopwatchRef = Omit<UseStopwatchResult, "elapsed" | "isRunning" | "laps">;
+type Props = {
+  /**
+  * Whether to start counting immediately.
+  * @default false
+  */
+  readonly autoStart?: boolean;
+  /**
+  * Make the rendered text bold.
+  */
+  readonly bold?: boolean;
+  /**
+  * Text color for the rendered time.
+  */
+  readonly color?: string;
+  /**
+  * Custom formatter for the elapsed time.
+  * Receives elapsed milliseconds, returns a display string.
+  * @default formatDuration (MM:SS or HH:MM:SS)
+  */
+  readonly format?: (elapsed: number) => string;
+  /**
+  * Tick interval in milliseconds.
+  * @default 1000
+  */
+  readonly interval?: number;
+  readonly ref?: Ref<StopwatchRef>;
+};
+/**
+* A count-up stopwatch component.
+*
+* Exposes `start`, `stop`, `toggle`, `reset`, and `lap` methods via ref.
+*
+* ```tsx
+* const ref = useRef&lt;StopwatchRef>(null);
+* &lt;Stopwatch ref={ref} autoStart />
+* ```
+*/
+declare const Stopwatch: ({
+  autoStart,
+  bold,
+  color,
+  format,
+  interval,
+  ref
+}: Props) => ReactElement;
+export { Props, Stopwatch, type Props as StopwatchProps, StopwatchRef, Stopwatch as default };