@visulima/tui 1.0.0-alpha.9 → 1.0.1

package/dist/components/stopwatch.js

@@ -0,0 +1 @@
+import{jsx as p}from"react/jsx-runtime";import{useImperativeHandle as m}from"react";import f from"../ink/hooks/use-stopwatch.js";import{f as i}from"../packem_shared/format-time-fjoQHMxD.js";import{Text as n}from"./text.js";const x=({autoStart:o,bold:r,color:a,format:e=i,interval:s,ref:l})=>{const t=f({autoStart:o,interval:s});return m(l,()=>({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]),p(n,{bold:r,color:a,children:e(t.elapsed)})};export{x as Stopwatch,x 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 @@
+import{jsxs as g}from"react/jsx-runtime";import{useState as T,useRef as c,useEffect as l}from"react";import{Text as d}from"./text.js";function k({color:f,cursor:i="▊",interval:o=20,onComplete:n,showCursorWhenDone:a=!1,text:r}){const[t,s]=T(0),u=c(n),e=c(!1);u.current=n,l(()=>{s(0),e.current=!1},[r]),l(()=>{if(t>=r.length){e.current||(e.current=!0,u.current?.());return}const p=setTimeout(()=>{s(x=>Math.min(r.length,x+1))},o);return()=>{clearTimeout(p)}},[t,r,o]);const m=!(t>=r.length)||a,h=r.slice(0,t);return g(d,{color:f,children:[h,m?i:""]})}export{k as StreamingText,k 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 @@
+import{jsxs as l,jsx as x}from"react/jsx-runtime";import{useState as F,useCallback as $}from"react";import j from"../ink/hooks/use-focus.js";import y from"../ink/hooks/use-input.js";import{Box as u}from"./box.js";import{Text as a}from"./text.js";const A=["off","on"];function V({accentColor:e="green",autoFocus:f=!1,children:n,defaultValue:m=!1,isDisabled:r=!1,labels:s=A,onChange:t,value:c}){const{isFocused:i}=j({autoFocus:f,isActive:!r}),[v,b]=F(m),o=c??v;y($((h,k)=>{if(i&&(k.return||h===" ")){const d=!o;c===void 0&&b(d),t?.(d)}},[i,o,c,t]),{isActive:!r&&i});const p=s[0],C=s[1],g=i?e:void 0;return l(u,{gap:1,children:[l(u,{gap:0,children:[l(a,{backgroundColor:o?void 0:"gray",color:o?void 0:"black",dimColor:r,children:[" ",p," "]}),l(a,{backgroundColor:o?e:void 0,color:o?"black":void 0,dimColor:r,children:[" ",C," "]})]}),n===void 0?void 0:x(a,{color:g,dimColor:r,children:n})]})}export{V as Switch,V 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 @@
+import{jsx as e,Fragment as n}from"react/jsx-runtime";function a({children:r}){return e(n,{children:r})}export{a as Tab,a 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 @@
+import{jsx as y}from"react/jsx-runtime";import{Table as _}from"@visulima/tabular";import{THICK_BORDER as g,ROUNDED_BORDER as b,NO_BORDER as w,MINIMAL_BORDER as S,MARKDOWN_BORDER as W,DOUBLE_BORDER as x,DOTS_BORDER as C,DEFAULT_BORDER as E,BLOCK_BORDER as H,ASCII_BORDER as I}from"@visulima/tabular/style";import{useMemo as L}from"react";import{Text as M}from"./text.js";const N={ascii:I,block:H,default:E,dots:C,double:x,markdown:W,minimal:S,none:w,rounded:b,thick:g},T=t=>typeof t=="string"?{key:t}:t,A=({borderStyle:t="default",columns:d,data:a,formatCell:n,formatHeader:m,maxWidth:f,padding:i=1,showHeader:s=!0,skeleton:u="",wordWrap:D=!1})=>{const h=L(()=>{if(a.length===0)return"";let r;if(d?r=d.map(e=>T(e)):r=Object.keys(a[0]).map(e=>({key:e})),r.length===0)return"";const k=typeof t=="string"?N[t]??E:t,O=r.map(e=>e.width),B=O.some(e=>e!==void 0),R=new _({columnWidths:B?O:void 0,maxWidth:f,showHeader:s,style:{border:k,paddingLeft:i,paddingRight:i},wordWrap:D});if(s){const e=r.map(o=>{const l=o.header??o.key;return m?m(o.key):l});R.setHeaders(e)}for(const[e,o]of a.entries()){const l=r.map(c=>{const p=o[c.key];return n?n(p,c.key,e):p==null?u:String(p)});R.addRow(l)}return R.toString()},[t,d,a,n,m,f,i,s,u,D]);return y(M,{children:h})},q=A;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 @@
+import{jsx as y,jsxs as A}from"react/jsx-runtime";import{useRef as I,useState as U,useCallback as d,useEffect as X,useMemo as j,Children as Y}from"react";import Z from"../ink/hooks/use-input.js";import{Box as M}from"./box.js";import{Text as D}from"./text.js";const _=/^\d$/u,G=e=>e!=null&&typeof e=="object"&&"props"in e&&"name"in e.props,H=e=>{const t=[];for(const n of Y.toArray(e))G(n)&&t.push(n);return t},E=(e,t)=>e.some(n=>t[n]),J=(e,t,n)=>e?t?{backgroundColor:n?.activeTab?.backgroundColor??"green",color:n?.activeTab?.color??"black"}:{backgroundColor:"gray",color:"black"}:{backgroundColor:void 0,color:void 0};function nr({children:e,colors:t,defaultValue:n,flexDirection:f="row",isFocused:b,keyMap:u,onChange:T,showIndex:F=!0,value:x,width:v}){const s=H(e),c=s.length,p=I(s);p.current=s;const l=f==="column"||f==="column-reverse",g=x!==void 0,[L,O]=U(()=>{const r=x??n;if(r==null||c===0)return 0;const o=s.findIndex(i=>i.props.name===r);return o===-1?0:o}),h=g?Math.max(0,s.findIndex(r=>r.props.name===x)):L,P=d(()=>{},[]),a=g?P:O,m=I(T);m.current=T,X(()=>{if(g)return;const r=p.current[h];r&&m.current(r.props.name,r)},[]);const B=j(()=>u?.previous??[l?"upArrow":"leftArrow"],[u?.previous,l]),N=j(()=>u?.next??[l?"downArrow":"rightArrow"],[u?.next,l]),R=u?.useNumbers??!0,S=u?.useTab??!0,k=I(h);k.current=h;const V=d(r=>{a(r);const o=p.current[r];o&&m.current(o.props.name,o)},[a]),C=d(()=>{const r=(k.current+1)%c;a(r);const o=p.current[r];o&&m.current(o.props.name,o)},[c,a]),w=d(()=>{const r=(k.current-1+c)%c;a(r);const o=p.current[r];o&&m.current(o.props.name,o)},[c,a]);Z(d((r,o)=>{if(E(B,o)){w();return}if(E(N,o)){C();return}if(o.tab&&S&&b==null){o.shift?w():C();return}if(R&&o.meta&&_.test(r)){const i=r==="0"?9:Number.parseInt(r,10)-1;i<c&&V(i)}},[B,N,S,R,b,w,C,c,V]),{isActive:b!==!1});const $=typeof v=="number"?v:6,Q=j(()=>l?"─".repeat($):" | ",[l,$]);return y(M,{flexDirection:f,width:v,children:s.map((r,o)=>{const{name:i}=r.props,q=J(h===o,b!==!1,t);let z=null;return F&&(z=A(D,{color:"grey",children:[o+1,"."," "]})),A(M,{flexDirection:f,children:[o!==0&&y(D,{color:"dim",children:Q}),A(M,{children:[z,y(D,{backgroundColor:q.backgroundColor,color:q.color,children:r})]})]},i)})})}export{nr as Tabs,nr 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 @@
+import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import{Box as a}from"./box.js";import{Text as n}from"./text.js";function u({children:d,color:i="blue",icon:o,variant:c="subtle"}){return c==="outline"?e(a,{borderColor:i,borderStyle:"round",paddingX:1,children:r(n,{color:i,children:[o===void 0?void 0:r(l,{children:[o," "]}),d]})}):c==="solid"?r(n,{backgroundColor:i,color:"black",children:[" ",o===void 0?void 0:r(l,{children:[o," "]}),d," "]}):r(n,{color:i,children:[o===void 0?void 0:r(l,{children:[o," "]}),d]})}export{u as Tag,u 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 @@
+import{jsx as f,jsxs as w}from"react/jsx-runtime";import{useState as q,useRef as k,useCallback as L}from"react";import N from"../ink/hooks/use-input.js";import{i as O}from"../packem_shared/input-utils-BSWCb4F_.js";import{Box as I}from"./box.js";import{Text as h}from"./text.js";const P=/\S+\s*$/,S=(n,r)=>n.length===0||!r?void 0:r.find(t=>t.startsWith(n))?.slice(n.length)??void 0,y=-1,T=(n,r,t,e)=>r.leftArrow?Math.max(0,t-1):r.home||r.ctrl&&n==="a"?0:r.end||r.ctrl&&n==="e"?e:y,V=(n,r,t,e)=>{if(r.backspace&&e>0)return[t.slice(0,e-1)+t.slice(e),e-1];if(r.delete&&e<t.length)return[t.slice(0,e)+t.slice(e+1),e];if(r.ctrl&&n==="u")return[t.slice(e),0];if(r.ctrl&&n==="k")return[t.slice(0,e),e];if(r.ctrl&&n==="w"){const m=t.slice(0,e).replace(P,"");return[m+t.slice(e),m.length]}};function U({defaultValue:n="",isDisabled:r=!1,mask:t=!1,onChange:e,onSubmit:m,placeholder:x,suggestions:b}){const[o,v]=q(n),[d,u]=q(n.length),A=k(o);A.current=o;const M=k(d);M.current=d;const g=k(e);g.current=e;const j=k(m);j.current=m;const B=S(o,b),z=L((p,a)=>{const{current:s}=M,c=A.current;if(a.return){const i=S(c,b),l=i?c+i:c;i&&(v(l),u(l.length),g.current?.(l)),j.current?.(l);return}if(a.escape)return;if(a.rightArrow){const i=S(c,b);if(s===c.length&&i){const l=c+i;v(l),u(l.length),g.current?.(l);return}u(Math.min(c.length,s+1));return}const D=T(p,a,s,c.length);if(D!==y){u(D);return}const R=V(p,a,c,s);if(R){const[i,l]=R;v(i),u(l),g.current?.(i);return}if(O(p,a)){const i=c.slice(0,s)+p+c.slice(s);v(i),u(s+p.length),g.current?.(i)}},[b]);N(z,{isActive:!r});const C=t?"*".repeat(o.length):o,E=C.slice(0,d),F=C[d],H=C.slice(d+1);return r?f(I,{children:f(h,{dimColor:!0,children:C||x||""})}):o.length===0&&x?w(I,{children:[f(h,{dimColor:!0,inverse:!0,children:x[0]}),f(h,{dimColor:!0,children:x.slice(1)})]}):w(I,{children:[w(h,{children:[E,f(h,{inverse:!0,children:F??" "}),H]}),B?f(h,{dimColor:!0,children:B}):void 0]})}export{U as TextInput,U 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 @@
+import{jsx as w}from"react/jsx-runtime";import e from"@visulima/colorize";import{useContext as b,useCallback as v}from"react";import{a as k}from"../packem_shared/colorize-DU4YZkp3.js";import{a as R}from"../packem_shared/accessibility-context-DDyHTwmA.js";import{b as S}from"../packem_shared/background-context-rjOaWFki.js";function W({"aria-hidden":p=!1,"aria-label":a,backgroundColor:i,bold:t=!1,children:s,color:l,dimColor:o=!1,inverse:f=!1,italic:d=!1,strikethrough:u=!1,underline:c=!1,wrap:h="wrap"}){const{isScreenReaderEnabled:n}=b(R),m=b(S),g=n&&a?a:s,C=v(r=>{o&&(r=e.dim(r)),l&&(r=k(r,l,"foreground"));const x=i??m;return x&&(r=k(r,x,"background")),t&&(r=e.bold(r)),d&&(r=e.italic(r)),c&&(r=e.underline(r)),u&&(r=e.strikethrough(r)),f&&(r=e.inverse(r)),r},[o,l,i,m,t,d,c,u,f]);return g==null||n&&p?null:w("ink-text",{internal_transform:C,style:{flexDirection:"row",flexGrow:0,flexShrink:1,textWrap:h},children:n&&a?a:s})}export{W as Text,W as default};

package/dist/components/textarea.d.ts

@@ -0,0 +1,68 @@
+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, the component responds to keyboard input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum visible rows before viewport scrolling kicks in.
+  * When set, the textarea will grow from `rows` to `maxRows` before scrolling.
+  */
+  readonly maxRows?: number;
+  /**
+  * Fires on every edit with the updated text.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Fires when the user presses Meta+Enter or Ctrl+Enter.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Greyed-out text shown when the textarea is empty.
+  */
+  readonly placeholder?: string;
+  /**
+  * Number of visible rows (viewport height).
+  * @default 5
+  */
+  readonly rows?: number;
+  /**
+  * Show line numbers in the left gutter.
+  * @default false
+  */
+  readonly showLineNumbers?: boolean;
+  /**
+  * Number of spaces inserted for a Tab key press.
+  * @default 2
+  */
+  readonly tabSize?: number;
+};
+/**
+* A multi-line text input with cursor navigation, selection, clipboard, undo/redo,
+* paste support, and viewport scrolling.
+*
+* ```tsx
+* <Textarea defaultValue="Hello\nWorld" rows={10} onChange={setValue} onSubmit={handleSubmit} />
+* ```
+*/
+declare function Textarea({
+  defaultValue,
+  isDisabled,
+  isFocused,
+  maxRows,
+  onChange,
+  onSubmit,
+  placeholder,
+  rows,
+  showLineNumbers,
+  tabSize
+}: Props): ReactElement;
+export { Props, Textarea, type Props as TextareaProps, Textarea as default };

package/dist/components/textarea.js

@@ -0,0 +1,2 @@
+import{jsx as l,jsxs as m,Fragment as x}from"react/jsx-runtime";import{useRef as T,useState as I,useEffect as B,useMemo as W,useCallback as F}from"react";import G from"../ink/hooks/use-clipboard.js";import H from"../ink/hooks/use-input.js";import N from"../ink/hooks/use-paste.js";import O from"../ink/hooks/use-text-buffer.js";import{i as P}from"../packem_shared/input-utils-BSWCb4F_.js";import{Box as C}from"./box.js";import{Text as o}from"./text.js";const Q=(i,c)=>c.line<i.line||c.line===i.line&&c.col<i.col?{endCol:i.col,endLine:i.line,startCol:c.col,startLine:c.line}:{endCol:c.col,endLine:c.line,startCol:i.col,startLine:i.line};function rr({defaultValue:i="",isDisabled:c=!1,isFocused:g=!0,maxRows:d,onChange:v,onSubmit:h,placeholder:p,rows:a=5,showLineNumbers:f=!1,tabSize:L=2}){const n=O(i),S=T(n);S.current=n;const{copy:u}=G(),[s,A]=I(0),E=T(v);E.current=v;const k=T(h);k.current=h;const D=T(i);B(()=>{n.value!==D.current&&(D.current=n.value,E.current?.(n.value))},[n.value]);const w=W(()=>d?Math.min(Math.max(a,n.lines.length),d):a,[a,d,n.lines.length]);B(()=>{A(t=>n.cursor.line<t?n.cursor.line:n.cursor.line>=t+w?n.cursor.line-w+1:t)},[n.cursor.line,w]);const M=F((t,r)=>{const e=S.current;if(r.return&&(r.meta||r.ctrl)){k.current?.(e.value);return}if(r.return){e.newline();return}if(r.escape){e.clearSelection();return}if(r.tab){e.insert(" ".repeat(L));return}if(r.ctrl&&t==="z"){e.undo();return}if(r.ctrl&&(t==="y"||r.shift&&t==="Z")){e.redo();return}if(r.ctrl&&t==="c"&&e.hasSelection()){u(e.getSelectedText());return}if(r.ctrl&&(t==="A"||t==="a"&&r.shift)){e.selectAll();return}if(r.upArrow){e.moveCursor("up",r.shift);return}if(r.downArrow){e.moveCursor("down",r.shift);return}if(r.leftArrow){e.moveCursor("left",r.shift);return}if(r.rightArrow){e.moveCursor("right",r.shift);return}if(r.home){r.ctrl?e.moveToStart(r.shift):e.moveToLineStart(r.shift);return}if(r.end){r.ctrl?e.moveToEnd(r.shift):e.moveToLineEnd(r.shift);return}if(r.ctrl&&t==="a"){e.moveToLineStart(r.shift);return}if(r.ctrl&&t==="e"){e.moveToLineEnd(r.shift);return}if(r.backspace){e.deleteBack();return}if(r.delete){e.deleteForward();return}if(r.ctrl&&t==="u"){e.deleteToLineStart();return}if(r.ctrl&&t==="k"){e.deleteToLineEnd();return}if(r.ctrl&&t==="w"){e.deleteWord();return}P(t,r)&&(e.hasSelection()?e.replaceSelection(t):e.insert(t))},[u,L]);H(M,{isActive:g&&!c});const R=F(t=>{const r=S.current;r.hasSelection()?r.replaceSelection(t):r.insert(t)},[]);N(R,{isActive:g&&!c});const z=n.lines.slice(s,s+w),b=f?String(n.lines.length).length+1:0,j=n.anchor?Q(n.cursor,n.anchor):null;if(c)return l(C,{flexDirection:"column",children:z.map((t,r)=>{const e=s+r;return m(C,{children:[f?m(o,{dimColor:!0,children:[String(e+1).padStart(b)," "]}):void 0,l(o,{dimColor:!0,children:t||(e===0&&p?p:"")})]},e)})});if(n.value.length===0&&p){const t=p.split(`
+`).slice(0,w);return l(C,{flexDirection:"column",children:t.map((r,e)=>m(C,{children:[f?m(o,{dimColor:!0,children:[String(e+1).padStart(b)," "]}):void 0,e===0?m(o,{children:[l(o,{dimColor:!0,inverse:!0,children:r[0]??" "}),l(o,{dimColor:!0,children:r.slice(1)})]}):l(o,{dimColor:!0,children:r})]},e))})}return l(C,{flexDirection:"column",children:z.map((t,r)=>{const e=s+r,y=e===n.cursor.line;return m(C,{children:[f?m(o,{dimColor:!y,children:[String(e+1).padStart(b)," "]}):void 0,l(o,{children:U(t,e,n.cursor,j)})]},e)})})}function U(i,c,g,d){const v=c===g.line,h=v?g.col:-1,p=d&&c>=d.startLine&&c<=d.endLine;if(!p&&!v)return l(x,{children:i});if(!p){const u=i.slice(0,h),s=i[h],A=i.slice(h+1);return m(x,{children:[u,l(o,{inverse:!0,children:s??" "}),A]})}const a=c===d.startLine?d.startCol:0,f=c===d.endLine?d.endCol:i.length,L=i.slice(0,a),n=i.slice(a,f),S=i.slice(f);if(v&&(h<a||h>=f)){const u=[];let s=0;return h<a?(u.push(l(o,{children:i.slice(0,h)},s++)),u.push(l(o,{inverse:!0,children:i[h]??" "},s++)),u.push(l(o,{children:i.slice(h+1,a)},s++)),u.push(l(o,{inverse:!0,children:n},s++)),u.push(l(o,{children:S},s++))):(u.push(l(o,{children:L},s++)),u.push(l(o,{inverse:!0,children:n},s++)),u.push(l(o,{children:i.slice(f,h)},s++)),u.push(l(o,{inverse:!0,children:i[h]??" "},s++)),u.push(l(o,{children:i.slice(h+1)},s++))),l(x,{children:u})}return m(x,{children:[L,l(o,{inverse:!0,children:n}),S]})}export{rr as Textarea,rr as default};