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

package/dist/components/status-message.js

@@ -0,0 +1 @@
+var i=Object.defineProperty;var e=(r,o)=>i(r,"name",{value:o,configurable:!0});import{jsxs as c,jsx as a}from"react/jsx-runtime";import{Box as l}from"./box.js";import{Text as t}from"./text.js";import{o as m}from"../packem_shared/variant-config-BJqpNo7H.js";var f=Object.defineProperty,p=e((r,o)=>f(r,"name",{value:o,configurable:!0}),"o");function u({children:r,variant:o}){const{color:s,icon:n}=m[o];return c(l,{gap:1,children:[a(t,{color:s,children:n}),a(t,{children:r})]})}e(u,"p");p(u,"StatusMessage");export{u as StatusMessage,u 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 @@
+var x=Object.defineProperty;var h=(r,o)=>x(r,"name",{value:o,configurable:!0});import{jsx as n,jsxs as c}from"react/jsx-runtime";import{Fragment as C}from"react";import{Box as t}from"./box.js";import{Text as d}from"./text.js";var b=Object.defineProperty,g=h((r,o)=>b(r,"name",{value:o,configurable:!0}),"u");const u={active:"●",completed:"✔",error:"✖",pending:"○"},v=g((r,o,a)=>r.status!==void 0?r.status:o<a?"completed":o===a?"active":"pending","resolveStatus");function y({accentColor:r="blue",activeIndex:o=0,errorColor:a="red",orientation:f="horizontal",steps:m}){return f==="vertical"?n(t,{flexDirection:"column",children:m.map((i,l)=>{const e=v(i,l,o),p=l===m.length-1,s=e==="error"?a:e==="pending"?void 0:r;return c(t,{flexDirection:"column",children:[c(t,{children:[c(d,{color:s,dimColor:e==="pending",children:[u[e]," "]}),n(d,{bold:e==="active",color:s,dimColor:e==="pending",children:i.label})]}),i.description===void 0?void 0:n(t,{marginLeft:2,children:n(d,{dimColor:!0,children:i.description})}),p?void 0:n(t,{marginLeft:0,children:n(d,{dimColor:!0,children:"│"})})]},i.key??l)})}):n(t,{children:m.map((i,l)=>{const e=v(i,l,o),p=e==="error"?a:e==="pending"?void 0:r,s=l===m.length-1;return c(C,{children:[c(t,{children:[c(d,{color:p,dimColor:e==="pending",children:[u[e]," "]}),n(d,{bold:e==="active",color:p,dimColor:e==="pending",children:i.label})]}),s?void 0:n(d,{dimColor:!0,children:" ── "})]},i.key??l)})})}h(y,"g");g(y,"Stepper");export{y as Stepper,y 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 };

package/dist/components/stopwatch.js

@@ -0,0 +1 @@
+var m=Object.defineProperty;var e=(r,o)=>m(r,"name",{value:o,configurable:!0});import{jsx as f}from"react/jsx-runtime";import{useImperativeHandle as i}from"react";import n from"../ink/hooks/use-stopwatch.js";import{f as c}from"../packem_shared/format-time-C7Q-hQZq.js";import{Text as u}from"./text.js";var d=Object.defineProperty,g=e((r,o)=>d(r,"name",{value:o,configurable:!0}),"r");const w=g(({autoStart:r,bold:o,color:a,format:l=c,interval:p,ref:s})=>{const t=n({autoStart:r,interval:p});return i(s,()=>({lap:t.lap,reset:t.reset,start:t.start,stop:t.stop,toggle:t.toggle}),[t.lap,t.reset,t.start,t.stop,t.toggle]),f(u,{bold:o,color:a,children:l(t.elapsed)})},"Stopwatch");export{w as Stopwatch,w as default};

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

@@ -0,0 +1,46 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color applied to the streamed output.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Glyph rendered at the streaming caret while characters are still being revealed.
+  * @default "▊" (left three quarters block)
+  */
+  readonly cursor?: string;
+  /**
+  * Milliseconds between characters.
+  * @default 20
+  */
+  readonly interval?: number;
+  /**
+  * Called exactly once per `text` value, after the full text has been revealed.
+  */
+  readonly onComplete?: () => void;
+  /**
+  * Whether to display the cursor after streaming completes.
+  * @default false
+  */
+  readonly showCursorWhenDone?: boolean;
+  /**
+  * Full text to stream into the output.
+  */
+  readonly text: string;
+};
+/**
+* Typewriter animation that reveals text one character at a time.
+* Automatically resets and replays when `text` changes. `onComplete`
+* fires exactly once per `text` value once it is fully revealed.
+*/
+declare function StreamingText({
+  color,
+  cursor,
+  interval,
+  onComplete,
+  showCursorWhenDone,
+  text
+}: Props): ReactElement;
+export { Props, StreamingText, type Props as StreamingTextProps, StreamingText as default };

package/dist/components/streaming-text.js

@@ -0,0 +1 @@
+var T=Object.defineProperty;var u=(r,t)=>T(r,"name",{value:t,configurable:!0});import{jsxs as d}from"react/jsx-runtime";import{useState as v,useRef as f,useEffect as i}from"react";import{Text as C}from"./text.js";var S=Object.defineProperty,b=u((r,t)=>S(r,"name",{value:t,configurable:!0}),"c");function j({color:r,cursor:t="▊",interval:c=20,onComplete:a,showCursorWhenDone:m=!1,text:e}){const[n,s]=v(0),l=f(a),o=f(!1);l.current=a,i(()=>{s(0),o.current=!1},[e]),i(()=>{if(n>=e.length){o.current||(o.current=!0,l.current?.());return}const p=setTimeout(()=>{s(x=>Math.min(e.length,x+1))},c);return()=>{clearTimeout(p)}},[n,e,c]);const g=!(n>=e.length)||m,h=e.slice(0,n);return d(C,{color:r,children:[h,g?t:""]})}u(j,"u");b(j,"StreamingText");export{j as StreamingText,j as default};

package/dist/components/switch.d.ts

@@ -0,0 +1,55 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the on state.
+  * @default "green"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus when mounted if nothing else is focused.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Optional label rendered after the switch.
+  */
+  readonly children?: ReactNode;
+  /**
+  * Initial value when uncontrolled.
+  */
+  readonly defaultValue?: boolean;
+  /**
+  * Disable input and dim the switch.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Labels displayed inside the switch track.
+  * @default ["off", "on"]
+  */
+  readonly labels?: readonly [string, string];
+  /**
+  * Fired when the switch is toggled.
+  */
+  readonly onChange?: (value: boolean) => void;
+  /**
+  * Controlled value. Pair with `onChange` to update the parent.
+  */
+  readonly value?: boolean;
+};
+/**
+* Focusable on/off switch. Toggles with Space or Enter.
+* @returns A `ReactElement` rendering two labeled segments plus an optional
+* trailing label.
+*/
+declare function Switch({
+  accentColor,
+  autoFocus,
+  children,
+  defaultValue,
+  isDisabled,
+  labels,
+  onChange,
+  value
+}: Props): ReactElement;
+export { Props, Switch, type Props as SwitchProps, Switch as default };

package/dist/components/switch.js

@@ -0,0 +1 @@
+var j=Object.defineProperty;var t=(o,i)=>j(o,"name",{value:i,configurable:!0});import{jsxs as l,jsx as y}from"react/jsx-runtime";import{useState as A,useCallback as F}from"react";import S from"../ink/hooks/use-focus.js";import w from"../ink/hooks/use-input.js";import{Box as m}from"./box.js";import{Text as n}from"./text.js";var P=Object.defineProperty,T=t((o,i)=>P(o,"name",{value:i,configurable:!0}),"u");const B=["off","on"];function D({accentColor:o="green",autoFocus:i=!1,children:s,defaultValue:v=!1,isDisabled:e=!1,labels:d=B,onChange:u,value:c}){const{isFocused:a}=S({autoFocus:i,isActive:!e}),[b,p]=A(v),r=c??b;w(F((x,k)=>{if(a&&(k.return||x===" ")){const f=!r;c===void 0&&p(f),u?.(f)}},[a,r,c,u]),{isActive:!e&&a});const g=d[0],h=d[1],C=a?o:void 0;return l(m,{gap:1,children:[l(m,{gap:0,children:[l(n,{backgroundColor:r?void 0:"gray",color:r?void 0:"black",dimColor:e,children:[" ",g," "]}),l(n,{backgroundColor:r?o:void 0,color:r?"black":void 0,dimColor:e,children:[" ",h," "]})]}),s===void 0?void 0:y(n,{color:C,dimColor:e,children:s})]})}t(D,"m");T(D,"Switch");export{D as Switch,D as default};

package/dist/components/tab.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+  * Tab content to render when the tab is active.
+  */
+  readonly children: ReactNode;
+  /**
+  * Unique name identifying this tab.
+  */
+  readonly name: string;
+};
+/**
+* A single tab within a Tabs container.
+* The `name` prop identifies the tab; `children` is rendered when active.
+*/
+declare function Tab({
+  children
+}: Props): ReactElement;
+export { Props, Tab, type Props as TabProps, Tab as default };

package/dist/components/tab.js

@@ -0,0 +1 @@
+var t=Object.defineProperty;var a=(e,r)=>t(e,"name",{value:r,configurable:!0});import{jsx as n,Fragment as o}from"react/jsx-runtime";var i=Object.defineProperty,u=a((e,r)=>i(e,"name",{value:r,configurable:!0}),"t");function c({children:e}){return n(o,{children:e})}a(c,"o");u(c,"Tab");export{c as Tab,c as default};

package/dist/components/table.d.ts

@@ -0,0 +1,119 @@
+import { ReactElement } from 'react';
+interface BorderComponent {
+  char: string;
+  width: number;
+}
+/**
+* Represents the style of the border for a table or grid.
+*/
+interface BorderStyle {
+  /** Box vertical character. */
+  bodyJoin: BorderComponent;
+  /** Box vertical character. */
+  bodyLeft: BorderComponent;
+  /** Box vertical character. */
+  bodyRight: BorderComponent;
+  /** Box horizontal character. */
+  bottomBody: BorderComponent;
+  /** Box bottom join character. */
+  bottomJoin: BorderComponent;
+  /** Box bottom left character. */
+  bottomLeft: BorderComponent;
+  /** Box bottom right character. */
+  bottomRight: BorderComponent;
+  /** Box horizontal character. */
+  joinBody: BorderComponent;
+  /** Box horizontal join character. */
+  joinJoin: BorderComponent;
+  /** Box left join character. */
+  joinLeft: BorderComponent;
+  /** Box right join character. */
+  joinRight: BorderComponent;
+  /** Box horizontal character. */
+  topBody: BorderComponent;
+  /** Box top join character. */
+  topJoin: BorderComponent;
+  /** Box top left character. */
+  topLeft: BorderComponent;
+  /** Box top right character. */
+  topRight: BorderComponent;
+}
+/** Base style properties applicable globally */
+type HorizontalAlignment = "center" | "left" | "right";
+/**
+* Scalar value that can be displayed in a table cell.
+*/
+type Scalar = bigint | boolean | number | string | null | undefined;
+/**
+* Dictionary with scalar values, representing a single row of data.
+*/
+type ScalarDict = Record<string, Scalar>;
+/**
+* Configuration for a single table column.
+*/
+type ColumnConfig<T extends ScalarDict> = {
+  /**
+  * Horizontal alignment of cell content.
+  */
+  readonly align?: HorizontalAlignment;
+  /**
+  * Custom header label. Defaults to the key name.
+  */
+  readonly header?: string;
+  /**
+  * Key from the data object to display in this column.
+  */
+  readonly key: keyof T & string;
+  /**
+  * Fixed width for this column in characters.
+  */
+  readonly width?: number;
+};
+type Props<T extends ScalarDict> = {
+  /**
+  * Border style preset name or a custom `BorderStyle` object from `@visulima/tabular`.
+  * @default "default"
+  */
+  readonly borderStyle?: "ascii" | "block" | "default" | "dots" | "double" | "markdown" | "minimal" | "none" | "rounded" | "thick" | BorderStyle;
+  /**
+  * Columns to display and their order.
+  * Accepts simple key strings or `ColumnConfig` objects for advanced control.
+  * If omitted, all keys from the first data item are used.
+  */
+  readonly columns?: ((keyof T & string) | ColumnConfig<T>)[];
+  /**
+  * Array of objects to display as rows.
+  */
+  readonly data: T[];
+  /**
+  * Format a cell value before rendering. Return a string to display in the cell.
+  */
+  readonly formatCell?: (value: Scalar, column: keyof T & string, rowIndex: number) => string;
+  /**
+  * Format a header label before rendering. Return a string to display as the column header.
+  */
+  readonly formatHeader?: (column: keyof T & string) => string;
+  /**
+  * Maximum width of the table in characters. Columns will be truncated or wrapped to fit.
+  */
+  readonly maxWidth?: number;
+  /**
+  * Cell padding (left and right) in characters.
+  * @default 1
+  */
+  readonly padding?: number;
+  /**
+  * Whether to show the header row.
+  * @default true
+  */
+  readonly showHeader?: boolean;
+  /** Placeholder shown in place of `null` or `undefined` cell values. Defaults to an empty string. */
+  readonly skeleton?: string;
+  /**
+  * Enable word wrap instead of truncation when cells exceed their width.
+  * @default false
+  */
+  readonly wordWrap?: boolean;
+};
+declare const Table: <T extends ScalarDict>(props: Props<T>) => ReactElement;
+export { type ColumnConfig, type Props, type Scalar, type ScalarDict, Table, type ColumnConfig as TableColumnConfig, type Props as TableProps, type Scalar as TableScalar, type ScalarDict as TableScalarDict, Table as default };

package/dist/components/table.js

@@ -0,0 +1 @@
+var b=Object.defineProperty;var E=(e,o)=>b(e,"name",{value:o,configurable:!0});import{jsx as _}from"react/jsx-runtime";import{Table as w}from"@visulima/tabular";import{THICK_BORDER as C,ROUNDED_BORDER as T,NO_BORDER as W,MINIMAL_BORDER as S,MARKDOWN_BORDER as v,DOUBLE_BORDER as x,DOTS_BORDER as H,DEFAULT_BORDER as h,BLOCK_BORDER as I,ASCII_BORDER as L}from"@visulima/tabular/style";import{useMemo as N}from"react";import{Text as A}from"./text.js";var K=Object.defineProperty,k=E((e,o)=>K(e,"name",{value:o,configurable:!0}),"f");const M={ascii:L,block:I,default:h,dots:H,double:x,markdown:v,minimal:S,none:W,rounded:T,thick:C},j=k(e=>typeof e=="string"?{key:e}:e,"toColumnConfig"),U=k(({borderStyle:e="default",columns:o,data:n,formatCell:d,formatHeader:m,maxWidth:u,padding:i=1,showHeader:l=!0,skeleton:p="",wordWrap:O=!1})=>{const B=N(()=>{if(n.length===0)return"";let r;if(o?r=o.map(t=>j(t)):r=Object.keys(n[0]).map(t=>({key:t})),r.length===0)return"";const g=typeof e=="string"?M[e]??h:e,D=r.map(t=>t.width),y=D.some(t=>t!==void 0),s=new w({columnWidths:y?D:void 0,maxWidth:u,showHeader:l,style:{border:g,paddingLeft:i,paddingRight:i},wordWrap:O});if(l){const t=r.map(a=>{const f=a.header??a.key;return m?m(a.key):f});s.setHeaders(t)}for(const[t,a]of n.entries()){const f=r.map(c=>{const R=a[c.key];return d?d(R,c.key,t):R==null?p:String(R)});s.addRow(f)}return s.toString()},[e,o,n,d,m,u,i,l,p,O]);return _(A,{children:B})},"TableComponent"),Q=U;export{Q as Table,Q as default};

package/dist/components/tabs.d.ts

@@ -0,0 +1,107 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { Props as Props$1 } from "./tab.js";
+/**
+* Keyboard navigation configuration for Tabs.
+*/
+type KeyMap = {
+  /**
+  * Key names that move to the next tab.
+  * Defaults to `["rightArrow"]` for row layouts and `["downArrow"]` for column layouts.
+  */
+  readonly next?: ReadonlyArray<string>;
+  /**
+  * Key names that move to the previous tab.
+  * Defaults to `["leftArrow"]` for row layouts and `["upArrow"]` for column layouts.
+  */
+  readonly previous?: ReadonlyArray<string>;
+  /**
+  * Whether Meta/Cmd + 1–9 jumps to a specific tab.
+  * @default true
+  */
+  readonly useNumbers?: boolean;
+  /**
+  * Whether the Tab key cycles through tabs (only when `isFocused` is not managed by Ink).
+  * @default true
+  */
+  readonly useTab?: boolean;
+};
+/**
+* Color customization for active tab styling.
+*/
+type TabColors = {
+  readonly activeTab?: {
+    readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+    readonly color?: LiteralUnion<AnsiColors, string>;
+  };
+};
+type Props = {
+  /**
+  * Tab elements to render.
+  */
+  readonly children: ReactNode;
+  /**
+  * Active tab colors. When `isFocused` is `false`, the active tab uses gray.
+  */
+  readonly colors?: TabColors;
+  /**
+  * Name of the tab to select initially (uncontrolled mode).
+  * Ignored when `value` is provided.
+  */
+  readonly defaultValue?: string;
+  /**
+  * Layout direction for the tab bar.
+  * @default "row"
+  */
+  readonly flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+  /**
+  * Whether the tabs are focused and respond to keyboard input.
+  * - `true`: focused, uses active colors.
+  * - `false`: unfocused, uses gray active color, ignores input.
+  * - `undefined`/`null`: always active (focus not managed by Ink).
+  * @default undefined
+  */
+  readonly isFocused?: boolean | null;
+  /**
+  * Custom keyboard mappings.
+  */
+  readonly keyMap?: KeyMap;
+  /**
+  * Called when the active tab changes.
+  */
+  readonly onChange: (name: string, activeTab: ReactElement<Props$1>) => void;
+  /**
+  * Whether to display 1-based index numbers before each tab name.
+  * @default true
+  */
+  readonly showIndex?: boolean;
+  /**
+  * Controlled active tab name. When provided, the component is controlled —
+  * the parent owns the active tab state and must update it via `onChange`.
+  * When omitted, the component manages its own state (uncontrolled mode).
+  */
+  readonly value?: string;
+  /**
+  * Width of the container Box. Also determines the separator width in column layouts.
+  */
+  readonly width?: number | string;
+};
+/**
+* Tabbed navigation component. Renders a row or column of tabs with keyboard
+* navigation (arrow keys, Tab, number keys) and calls `onChange` when the
+* active tab changes.
+*/
+declare function Tabs({
+  children,
+  colors: colorsProp,
+  defaultValue,
+  flexDirection,
+  isFocused,
+  keyMap: keyMapProp,
+  onChange,
+  showIndex,
+  value,
+  width
+}: Props): ReactElement;
+export { KeyMap, Props, TabColors, Tabs, type KeyMap as TabsKeyMap, type Props as TabsProps, Tabs as default };

package/dist/components/tabs.js

@@ -0,0 +1 @@
+var X=Object.defineProperty;var A=(o,n)=>X(o,"name",{value:n,configurable:!0});import{jsx as y,jsxs as j}from"react/jsx-runtime";import{useRef as D,useState as Z,useCallback as d,useEffect as _,useMemo as M,Children as H}from"react";import J from"../ink/hooks/use-input.js";import{Box as I}from"./box.js";import{Text as B}from"./text.js";var Q=Object.defineProperty,f=A((o,n)=>Q(o,"name",{value:n,configurable:!0}),"b");const Y=/^\d$/u,$=f(o=>o!=null&&typeof o=="object"&&"props"in o&&"name"in o.props,"isTabElement"),rr=f(o=>{const n=[];for(const t of H.toArray(o))$(t)&&n.push(t);return n},"collectTabs"),G=f((o,n)=>o.some(t=>n[t]),"matchesAnyKey"),er=f((o,n,t)=>o?n?{backgroundColor:t?.activeTab?.backgroundColor??"green",color:t?.activeTab?.color??"black"}:{backgroundColor:"gray",color:"black"}:{backgroundColor:void 0,color:void 0},"getActiveTabColors");function or({children:o,colors:n,defaultValue:t,flexDirection:b="row",isFocused:h,keyMap:u,onChange:E,showIndex:K=!0,value:g,width:x}){const s=rr(o),c=s.length,p=D(s);p.current=s;const a=b==="column"||b==="column-reverse",C=g!==void 0,[L,O]=Z(()=>{const r=g??t;if(r==null||c===0)return 0;const e=s.findIndex(i=>i.props.name===r);return e===-1?0:e}),v=C?Math.max(0,s.findIndex(r=>r.props.name===g)):L,U=d(()=>{},[]),l=C?U:O,m=D(E);m.current=E,_(()=>{if(C)return;const r=p.current[v];r&&m.current(r.props.name,r)},[]);const F=M(()=>u?.previous??[a?"upArrow":"leftArrow"],[u?.previous,a]),N=M(()=>u?.next??[a?"downArrow":"rightArrow"],[u?.next,a]),P=u?.useNumbers??!0,R=u?.useTab??!0,k=D(v);k.current=v;const S=d(r=>{l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[l]),T=d(()=>{const r=(k.current+1)%c;l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[c,l]),w=d(()=>{const r=(k.current-1+c)%c;l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[c,l]);J(d((r,e)=>{if(G(F,e)){w();return}if(G(N,e)){T();return}if(e.tab&&R&&h==null){e.shift?w():T();return}if(P&&e.meta&&Y.test(r)){const i=r==="0"?9:Number.parseInt(r,10)-1;i<c&&S(i)}},[F,N,R,P,h,w,T,c,S]),{isActive:h!==!1});const V=typeof x=="number"?x:6,W=M(()=>a?"─".repeat(V):" | ",[a,V]);return y(I,{flexDirection:b,width:x,children:s.map((r,e)=>{const{name:i}=r.props,q=er(v===e,h!==!1,n);let z=null;return K&&(z=j(B,{color:"grey",children:[e+1,"."," "]})),j(I,{flexDirection:b,children:[e!==0&&y(B,{color:"dim",children:W}),j(I,{children:[z,y(B,{backgroundColor:q.backgroundColor,color:q.color,children:r})]})]},i)})})}A(or,"W");f(or,"Tabs");export{or as Tabs,or as default};

package/dist/components/tag.d.ts

@@ -0,0 +1,35 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type TagVariant = "outline" | "solid" | "subtle";
+type Props = {
+  /**
+  * Tag content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Base color.
+  * @default "blue"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Optional symbol rendered before the label (e.g. `●`, `✔`, `★`).
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Visual style.
+  * @default "subtle"
+  */
+  readonly variant?: TagVariant;
+};
+/**
+* Render a short pill-shaped label.
+* @returns A `ReactElement` rendering the tag in the requested variant.
+*/
+declare function Tag({
+  children,
+  color,
+  icon,
+  variant
+}: Props): ReactElement;
+export { Props, Tag, type Props as TagProps, TagVariant, Tag as default };

package/dist/components/tag.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var l=(o,r)=>a(o,"name",{value:r,configurable:!0});import{jsx as t,jsxs as e,Fragment as d}from"react/jsx-runtime";import{Box as u}from"./box.js";import{Text as n}from"./text.js";var v=Object.defineProperty,s=l((o,r)=>v(o,"name",{value:r,configurable:!0}),"i");function b({children:o,color:r="blue",icon:i,variant:c="subtle"}){return c==="outline"?t(u,{borderColor:r,borderStyle:"round",paddingX:1,children:e(n,{color:r,children:[i===void 0?void 0:e(d,{children:[i," "]}),o]})}):c==="solid"?e(n,{backgroundColor:r,color:"black",children:[" ",i===void 0?void 0:e(d,{children:[i," "]}),o," "]}):e(n,{color:r,children:[i===void 0?void 0:e(d,{children:[i," "]}),o]})}l(b,"l");s(b,"Tag");export{b as Tag,b as default};

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

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+type Props = {
+  /** @default "" */
+  readonly defaultValue?: string;
+  /**
+  * When true, all input is ignored and text is dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * When true, renders asterisks instead of the actual characters.
+  * @default false
+  */
+  readonly mask?: boolean;
+  /**
+  * Fires on every keystroke with the updated text.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Fires when the user presses Enter.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Greyed-out text shown when the input is empty.
+  */
+  readonly placeholder?: string;
+  /**
+  * Autocomplete candidates. The first case-sensitive prefix match is shown
+  * dimmed after the current input. Press right-arrow or Enter to accept.
+  */
+  readonly suggestions?: ReadonlyArray<string>;
+};
+/**
+* A single-line text input with cursor navigation, optional placeholder,
+* autocomplete suggestions, and password masking.
+*
+* Supports arrow keys, Home/End, Ctrl+A/E, Ctrl+U/K/W, Backspace, Delete.
+*/
+declare function TextInput({
+  defaultValue,
+  isDisabled,
+  mask,
+  onChange,
+  onSubmit,
+  placeholder,
+  suggestions
+}: Props): ReactElement;
+export { Props, TextInput, type Props as TextInputProps, TextInput as default };

package/dist/components/text-input.js

@@ -0,0 +1 @@
+var F=Object.defineProperty;var A=(t,e)=>F(t,"name",{value:e,configurable:!0});import{jsx as f,jsxs as I}from"react/jsx-runtime";import{useState as O,useRef as S,useCallback as G}from"react";import H from"../ink/hooks/use-input.js";import{i as J}from"../packem_shared/input-utils-fAxzSlNh.js";import{Box as j}from"./box.js";import{Text as h}from"./text.js";var K=Object.defineProperty,k=A((t,e)=>K(t,"name",{value:e,configurable:!0}),"p");const L=/\S+\s*$/,w=k((t,e)=>t.length===0||!e?void 0:e.find(n=>n.startsWith(t))?.slice(t.length)??void 0,"findSuggestion"),P=-1,V=k((t,e,n,r)=>e.leftArrow?Math.max(0,n-1):e.home||e.ctrl&&t==="a"?0:e.end||e.ctrl&&t==="e"?r:P,"handleNavigation"),_=k((t,e,n,r)=>{if(e.backspace&&r>0)return[n.slice(0,r-1)+n.slice(r),r-1];if(e.delete&&r<n.length)return[n.slice(0,r)+n.slice(r+1),r];if(e.ctrl&&t==="u")return[n.slice(r),0];if(e.ctrl&&t==="k")return[n.slice(0,r),r];if(e.ctrl&&t==="w"){const d=n.slice(0,r).replace(L,"");return[d+n.slice(r),d.length]}},"handleEditing");function q({defaultValue:t="",isDisabled:e=!1,mask:n=!1,onChange:r,onSubmit:d,placeholder:v,suggestions:b}){const[o,x]=O(t),[g,u]=O(t.length),y=S(o);y.current=o;const M=S(g);M.current=g;const m=S(r);m.current=r;const T=S(d);T.current=d;const B=w(o,b),R=G((p,a)=>{const{current:s}=M,c=y.current;if(a.return){const i=w(c,b),l=i?c+i:c;i&&(x(l),u(l.length),m.current?.(l)),T.current?.(l);return}if(a.escape)return;if(a.rightArrow){const i=w(c,b);if(s===c.length&&i){const l=c+i;x(l),u(l.length),m.current?.(l);return}u(Math.min(c.length,s+1));return}const E=V(p,a,s,c.length);if(E!==P){u(E);return}const N=_(p,a,c,s);if(N){const[i,l]=N;x(i),u(l),m.current?.(i);return}if(J(p,a)){const i=c.slice(0,s)+p+c.slice(s);x(i),u(s+p.length),m.current?.(i)}},[b]);H(R,{isActive:!e});const C=n?"*".repeat(o.length):o,W=C.slice(0,g),$=C[g],D=C.slice(g+1);return e?f(j,{children:f(h,{dimColor:!0,children:C||v||""})}):o.length===0&&v?I(j,{children:[f(h,{dimColor:!0,inverse:!0,children:v[0]}),f(h,{dimColor:!0,children:v.slice(1)})]}):I(j,{children:[I(h,{children:[W,f(h,{inverse:!0,children:$??" "}),D]}),B?f(h,{dimColor:!0,children:B}):void 0]})}A(q,"y");k(q,"TextInput");export{q as TextInput,q as default};

package/dist/components/text.d.ts

@@ -0,0 +1,79 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import 'cli-boxes';
+import 'yoga-layout';
+type Props = {
+  /**
+  * Hide the element from screen readers.
+  */
+  readonly "aria-hidden"?: boolean;
+  /**
+  * A label for the element for screen readers.
+  */
+  readonly "aria-label"?: string;
+  /**
+  * Same as `color`, but for the background.
+  */
+  readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Make the text bold.
+  */
+  readonly bold?: boolean;
+  readonly children?: ReactNode;
+  /**
+  * Change text color. Ink uses @visulima/colorize under the hood, so all its functionality is supported.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Dim the color (make it less bright).
+  */
+  readonly dimColor?: boolean;
+  /**
+  * Inverse background and foreground colors.
+  */
+  readonly inverse?: boolean;
+  /**
+  * Make the text italic.
+  */
+  readonly italic?: boolean;
+  /**
+  * Make the text crossed out with a line.
+  */
+  readonly strikethrough?: boolean;
+  /**
+  * Make the text underlined.
+  */
+  readonly underline?: boolean;
+  /**
+  * Controls how text wraps when it exceeds the container width.
+  *
+  * - `wrap` (default) — Wrap at word boundaries; break inside words only when a single word exceeds the width.
+  * - `wrap-anywhere` — Break at any character boundary, even when a whitespace break exists earlier.
+  * - `wrap-preserve-words` — Wrap at word boundaries; never break inside words (long words may overflow).
+  * - `wrap-strict` — Enforce exact width; always break at the column limit.
+  * - `truncate` / `truncate-end` — Truncate at the end with an ellipsis.
+  * - `truncate-start` — Truncate at the start with an ellipsis.
+  * - `truncate-middle` — Truncate in the middle with an ellipsis.
+  */
+  readonly wrap?: Styles["textWrap"];
+};
+/**
+* This component can display text and change its style to make it bold, underlined, italic, or strikethrough.
+*/
+declare function Text({
+  "aria-hidden": ariaHidden,
+  "aria-label": ariaLabel,
+  backgroundColor,
+  bold,
+  children,
+  color,
+  dimColor,
+  inverse,
+  italic,
+  strikethrough,
+  underline,
+  wrap
+}: Props): ReactElement | null;
+export { Props, Text, type Props as TextProps, Text as default };

package/dist/components/text.js

@@ -0,0 +1 @@
+var w=Object.defineProperty;var n=(t,e)=>w(t,"name",{value:e,configurable:!0});import{jsx as j}from"react/jsx-runtime";import a from"@visulima/colorize";import{useContext as g,useCallback as y}from"react";import{d as h}from"../packem_shared/colorize-DbTZMrJO.js";import{a as S}from"../packem_shared/accessibility-context-DDyHTwmA.js";import{b as T}from"../packem_shared/background-context-rjOaWFki.js";var A=Object.defineProperty,D=n((t,e)=>A(t,"name",{value:e,configurable:!0}),"g");function E({"aria-hidden":t=!1,"aria-label":e,backgroundColor:s,bold:o=!1,children:f,color:l,dimColor:d=!1,inverse:c=!1,italic:u=!1,strikethrough:m=!1,underline:b=!1,wrap:k="wrap"}){const{isScreenReaderEnabled:i}=g(S),x=g(T),C=i&&e?e:f,v=y(r=>{d&&(r=a.dim(r)),l&&(r=h(r,l,"foreground"));const p=s??x;return p&&(r=h(r,p,"background")),o&&(r=a.bold(r)),u&&(r=a.italic(r)),b&&(r=a.underline(r)),m&&(r=a.strikethrough(r)),c&&(r=a.inverse(r)),r},[d,l,s,x,o,u,b,m,c]);return C==null||i&&t?null:j("ink-text",{internal_transform:v,style:{flexDirection:"row",flexGrow:0,flexShrink:1,textWrap:k},children:i&&e?e:f})}n(E,"c");D(E,"Text");export{E as Text,E as default};