@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/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/stepper.js

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

package/dist/stopwatch.d.ts

@@ -0,0 +1,49 @@
+import { UseStopwatchResult } from '@visulima/tui/hooks/use-stopwatch';
+import { Ref, ReactElement } from 'react';
+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/stopwatch.js

@@ -0,0 +1 @@
+import{jsx as p}from"react/jsx-runtime";import m from"@visulima/tui/components/text";import i from"@visulima/tui/hooks/use-stopwatch";import{formatDuration as f}from"@visulima/tui/utils";import{useImperativeHandle as n}from"react";const S=({autoStart:o,bold:r,color:e,format:a=f,interval:l,ref:s})=>{const t=i({autoStart:o,interval:l});return n(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]),p(m,{bold:r,color:e,children:a(t.elapsed)})};export{S as Stopwatch,S as default};

package/dist/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/streaming-text.js

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

package/dist/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/switch.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as x}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import a from"@visulima/tui/components/text";import F from"@visulima/tui/hooks/use-focus";import j from"@visulima/tui/hooks/use-input";import{useState as y,useCallback as A}from"react";const D=["off","on"];function z({accentColor:e="green",autoFocus:f=!1,children:d,defaultValue:m=!1,isDisabled:r=!1,labels:n=D,onChange:s,value:c}){const{isFocused:i}=F({autoFocus:f,isActive:!r}),[v,p]=y(m),o=c??v;j(A((h,k)=>{if(i&&(k.return||h===" ")){const t=!o;c===void 0&&p(t),s?.(t)}},[i,o,c,s]),{isActive:!r&&i});const C=n[0],b=n[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:[" ",C," "]}),l(a,{backgroundColor:o?e:void 0,color:o?"black":void 0,dimColor:r,children:[" ",b," "]})]}),d===void 0?void 0:x(a,{color:g,dimColor:r,children:d})]})}export{z as Switch,z as default};

package/dist/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/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/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/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 C,DOTS_BORDER as H,DEFAULT_BORDER as E,BLOCK_BORDER as I,ASCII_BORDER as L}from"@visulima/tabular/style";import M from"@visulima/tui/components/text";import{useMemo as N}from"react";const x={ascii:L,block:I,default:E,dots:H,double:C,markdown:W,minimal:S,none:w,rounded:b,thick:g},A=t=>typeof t=="string"?{key:t}:t,T=({borderStyle:t="default",columns:d,data:a,formatCell:n,formatHeader:i,maxWidth:f,padding:m=1,showHeader:s=!0,skeleton:u="",wordWrap:D=!1})=>{const h=N(()=>{if(a.length===0)return"";let r;if(d?r=d.map(e=>A(e)):r=Object.keys(a[0]).map(e=>({key:e})),r.length===0)return"";const B=typeof t=="string"?x[t]??E:t,O=r.map(e=>e.width),k=O.some(e=>e!==void 0),R=new _({columnWidths:k?O:void 0,maxWidth:f,showHeader:s,style:{border:B,paddingLeft:m,paddingRight:m},wordWrap:D});if(s){const e=r.map(o=>{const l=o.header??o.key;return i?i(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,i,f,m,s,u,D]);return y(M,{children:h})},q=T;export{q as Table,q as default};

package/dist/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/tabs.js

@@ -0,0 +1 @@
+import{jsx as y,jsxs as A}from"react/jsx-runtime";import I from"@visulima/tui/components/box";import j from"@visulima/tui/components/text";import X from"@visulima/tui/hooks/use-input";import{useRef as D,useState as Y,useCallback as d,useEffect as Z,useMemo as M,Children as _}from"react";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 _.toArray(e))G(n)&&t.push(n);return t},F=(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:N,showIndex:L=!0,value:x,width:v}){const s=H(e),c=s.length,p=D(s);p.current=s;const l=f==="column"||f==="column-reverse",g=x!==void 0,[O,P]=Y(()=>{const r=x??n;if(r==null||c===0)return 0;const o=s.findIndex(a=>a.props.name===r);return o===-1?0:o}),h=g?Math.max(0,s.findIndex(r=>r.props.name===x)):O,Q=d(()=>{},[]),i=g?Q:P,m=D(N);m.current=N,Z(()=>{if(g)return;const r=p.current[h];r&&m.current(r.props.name,r)},[]);const R=M(()=>u?.previous??[l?"upArrow":"leftArrow"],[u?.previous,l]),S=M(()=>u?.next??[l?"downArrow":"rightArrow"],[u?.next,l]),T=u?.useNumbers??!0,V=u?.useTab??!0,C=D(h);C.current=h;const q=d(r=>{i(r);const o=p.current[r];o&&m.current(o.props.name,o)},[i]),k=d(()=>{const r=(C.current+1)%c;i(r);const o=p.current[r];o&&m.current(o.props.name,o)},[c,i]),w=d(()=>{const r=(C.current-1+c)%c;i(r);const o=p.current[r];o&&m.current(o.props.name,o)},[c,i]);X(d((r,o)=>{if(F(R,o)){w();return}if(F(S,o)){k();return}if(o.tab&&V&&b==null){o.shift?w():k();return}if(T&&o.meta&&$.test(r)){const a=r==="0"?9:Number.parseInt(r,10)-1;a<c&&q(a)}},[R,S,V,T,b,w,k,c,q]),{isActive:b!==!1});const z=typeof v=="number"?v:6,U=M(()=>l?"─".repeat(z):" | ",[l,z]);return y(I,{flexDirection:f,width:v,children:s.map((r,o)=>{const{name:a}=r.props,B=J(h===o,b!==!1,t);let E=null;return L&&(E=A(j,{color:"grey",children:[o+1,"."," "]})),A(I,{flexDirection:f,children:[o!==0&&y(j,{color:"dim",children:U}),A(I,{children:[E,y(j,{backgroundColor:B.backgroundColor,color:B.color,children:r})]})]},a)})})}export{nr as Tabs,nr as default};

package/dist/tag-input.d.ts

@@ -0,0 +1,71 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the chips and focused border.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Reject duplicate tags (case-sensitive).
+  * @default true
+  */
+  readonly dedupe?: boolean;
+  /**
+  * Tags present when uncontrolled.
+  */
+  readonly defaultValue?: ReadonlyArray<string>;
+  /**
+  * Disable input and dim the display.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Maximum number of tags. Further input is ignored once reached.
+  */
+  readonly max?: number;
+  /**
+  * Fires whenever the set of tags changes.
+  */
+  readonly onChange?: (tags: ReadonlyArray<string>) => void;
+  /**
+  * Fires on Enter with an empty draft (i.e. "done adding tags").
+  */
+  readonly onSubmit?: (tags: ReadonlyArray<string>) => void;
+  /**
+  * Placeholder shown when there are no tags and no draft.
+  * @default "Add tags…"
+  */
+  readonly placeholder?: string;
+  /**
+  * Besides Enter, which typed characters commit the current draft (default comma and space).
+  */
+  readonly separators?: ReadonlyArray<string>;
+  /**
+  * Controlled tags. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: ReadonlyArray<string>;
+};
+/**
+* A chip-style multi-value input. Type a tag and press Enter (or a separator)
+* to commit it; Backspace on an empty draft removes the last tag. Renders each
+* committed value as a colored chip followed by the live draft.
+*/
+declare function TagInput({
+  accentColor,
+  autoFocus,
+  dedupe,
+  defaultValue,
+  isDisabled,
+  max,
+  onChange,
+  onSubmit,
+  placeholder,
+  separators,
+  value: controlledValue
+}: Props): ReactElement;
+export { Props, TagInput, type Props as TagInputProps, TagInput as default };

package/dist/tag-input.js

@@ -0,0 +1 @@
+import{jsxs as I,jsx as l}from"react/jsx-runtime";import R from"@visulima/tui/components/box";import c from"@visulima/tui/components/text";import T from"@visulima/tui/hooks/use-focus";import w from"@visulima/tui/hooks/use-input";import{useState as F,useRef as P,useCallback as f}from"react";const V=[],W=[","," "];function H({accentColor:a="blue",autoFocus:S=!1,dedupe:m=!0,defaultValue:A=V,isDisabled:p=!1,max:u,onChange:h,onSubmit:g,placeholder:$="Add tags…",separators:b=W,value:v}){const{isFocused:s}=T({autoFocus:S,isActive:!p}),C=v!==void 0,[j,B]=F(A),[o,n]=F(""),t=v??j,k=P(h);k.current=h;const i=f(e=>{C||B(e),k.current?.(e)},[C]),d=f(e=>{const r=e.trim();if(r.length!==0&&!(u!==void 0&&t.length>=u)){if(m&&t.includes(r)){n("");return}i([...t,r]),n("")}},[m,u,i,t]),D=f((e,r)=>{if(r.return){o.trim().length>0?d(o):g?.(t);return}if((r.backspace||r.delete)&&o.length===0){t.length>0&&i(t.slice(0,-1));return}if(r.backspace||r.delete){n(o.slice(0,-1));return}if(b.includes(e)){d(o);return}e.length>0&&e.codePointAt(0)>=32&&n(`${o}${e}`)},[d,o,g,b,i,t]);w(D,{isActive:s&&!p});const x=t.length===0&&o.length===0;return I(R,{borderColor:s?a:void 0,borderStyle:"round",flexWrap:"wrap",gap:1,paddingX:1,children:[t.map((e,r)=>l(c,{backgroundColor:a,children:` ${e} `},r)),x?l(c,{dimColor:!0,children:$}):l(c,{children:o}),s&&!x?l(c,{color:a,children:"▏"}):void 0]})}export{H as TagInput,H as default};

package/dist/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/tag.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import t from"@visulima/tui/components/box";import n from"@visulima/tui/components/text";function m({children:d,color:i="blue",icon:o,variant:c="subtle"}){return c==="outline"?e(t,{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{m as Tag,m as default};

package/dist/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/text-input.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as w}from"react/jsx-runtime";import I from"@visulima/tui/components/box";import h from"@visulima/tui/components/text";import H from"@visulima/tui/hooks/use-input";import{isInsertableInput as L}from"@visulima/tui/input";import{useState as q,useRef as k,useCallback as N}from"react";const O=/\S+\s*$/,S=(i,r)=>i.length===0||!r?void 0:r.find(t=>t.startsWith(i))?.slice(i.length)??void 0,y=-1,P=(i,r,t,e)=>r.leftArrow?Math.max(0,t-1):r.home||r.ctrl&&i==="a"?0:r.end||r.ctrl&&i==="e"?e:y,V=(i,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&&i==="u")return[t.slice(e),0];if(r.ctrl&&i==="k")return[t.slice(0,e),e];if(r.ctrl&&i==="w"){const m=t.slice(0,e).replace(O,"");return[m+t.slice(e),m.length]}};function U({defaultValue:i="",isDisabled:r=!1,mask:t=!1,onChange:e,onSubmit:m,placeholder:b,suggestions:v}){const[o,x]=q(i),[d,u]=q(i.length),A=k(o);A.current=o;const D=k(d);D.current=d;const g=k(e);g.current=e;const M=k(m);M.current=m;const j=S(o,v),z=N((p,f)=>{const{current:s}=D,c=A.current;if(f.return){const n=S(c,v),l=n?c+n:c;n&&(x(l),u(l.length),g.current?.(l)),M.current?.(l);return}if(f.escape)return;if(f.rightArrow){const n=S(c,v);if(s===c.length&&n){const l=c+n;x(l),u(l.length),g.current?.(l);return}u(Math.min(c.length,s+1));return}const R=P(p,f,s,c.length);if(R!==y){u(R);return}const $=V(p,f,c,s);if($){const[n,l]=$;x(n),u(l),g.current?.(n);return}if(L(p,f)){const n=c.slice(0,s)+p+c.slice(s);x(n),u(s+p.length),g.current?.(n)}},[v]);H(z,{isActive:!r});const C=t?"*".repeat(o.length):o,B=C.slice(0,d),E=C[d],F=C.slice(d+1);return r?a(I,{children:a(h,{dimColor:!0,children:C||b||""})}):o.length===0&&b?w(I,{children:[a(h,{dimColor:!0,inverse:!0,children:b[0]}),a(h,{dimColor:!0,children:b.slice(1)})]}):w(I,{children:[w(h,{children:[B,a(h,{inverse:!0,children:E??" "}),F]}),j?a(h,{dimColor:!0,children:j}):void 0]})}export{U as TextInput,U as default};