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

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 @@
+var O=Object.defineProperty;var x=(i,o)=>O(i,"name",{value:o,configurable:!0});import{jsx as l,jsxs as m,Fragment as T}from"react/jsx-runtime";import{useRef as b,useState as P,useEffect as j,useMemo as V,useCallback as z}from"react";import W from"../ink/hooks/use-clipboard.js";import N from"../ink/hooks/use-input.js";import X from"../ink/hooks/use-paste.js";import Y from"../ink/hooks/use-text-buffer.js";import{i as Z}from"../packem_shared/input-utils-fAxzSlNh.js";import{Box as C}from"./box.js";import{Text as c}from"./text.js";var q=Object.defineProperty,D=x((i,o)=>q(i,"name",{value:o,configurable:!0}),"C");const G=D((i,o)=>o.line<i.line||o.line===i.line&&o.col<i.col?{endCol:i.col,endLine:i.line,startCol:o.col,startLine:o.line}:{endCol:o.col,endLine:o.line,startCol:i.col,startLine:i.line},"getOrderedSelection");function J({defaultValue:i="",isDisabled:o=!1,isFocused:g=!0,maxRows:d,onChange:v,onSubmit:a,placeholder:p,rows:h=5,showLineNumbers:f=!1,tabSize:L=2}){const n=Y(i),S=b(n);S.current=n;const{copy:s}=W(),[u,A]=P(0),k=b(v);k.current=v;const y=b(a);y.current=a;const F=b(i);j(()=>{n.value!==F.current&&(F.current=n.value,k.current?.(n.value))},[n.value]);const w=V(()=>d?Math.min(Math.max(h,n.lines.length),d):h,[h,d,n.lines.length]);j(()=>{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 I=z((t,r)=>{const e=S.current;if(r.return&&(r.meta||r.ctrl)){y.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()){s(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}Z(t,r)&&(e.hasSelection()?e.replaceSelection(t):e.insert(t))},[s,L]);N(I,{isActive:g&&!o});const M=z(t=>{const r=S.current;r.hasSelection()?r.replaceSelection(t):r.insert(t)},[]);X(M,{isActive:g&&!o});const R=n.lines.slice(u,u+w),E=f?String(n.lines.length).length+1:0,$=n.anchor?G(n.cursor,n.anchor):null;if(o)return l(C,{flexDirection:"column",children:R.map((t,r)=>{const e=u+r;return m(C,{children:[f?m(c,{dimColor:!0,children:[String(e+1).padStart(E)," "]}):void 0,l(c,{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(c,{dimColor:!0,children:[String(e+1).padStart(E)," "]}):void 0,e===0?m(c,{children:[l(c,{dimColor:!0,inverse:!0,children:r[0]??" "}),l(c,{dimColor:!0,children:r.slice(1)})]}):l(c,{dimColor:!0,children:r})]},e))})}return l(C,{flexDirection:"column",children:R.map((t,r)=>{const e=u+r,H=e===n.cursor.line;return m(C,{children:[f?m(c,{dimColor:!H,children:[String(e+1).padStart(E)," "]}):void 0,l(c,{children:B(t,e,n.cursor,$)})]},e)})})}x(J,"D");D(J,"Textarea");function B(i,o,g,d){const v=o===g.line,a=v?g.col:-1,p=d&&o>=d.startLine&&o<=d.endLine;if(!p&&!v)return l(T,{children:i});if(!p){const s=i.slice(0,a),u=i[a],A=i.slice(a+1);return m(T,{children:[s,l(c,{inverse:!0,children:u??" "}),A]})}const h=o===d.startLine?d.startCol:0,f=o===d.endLine?d.endCol:i.length,L=i.slice(0,h),n=i.slice(h,f),S=i.slice(f);if(v&&(a<h||a>=f)){const s=[];let u=0;return a<h?(s.push(l(c,{children:i.slice(0,a)},u++)),s.push(l(c,{inverse:!0,children:i[a]??" "},u++)),s.push(l(c,{children:i.slice(a+1,h)},u++)),s.push(l(c,{inverse:!0,children:n},u++)),s.push(l(c,{children:S},u++))):(s.push(l(c,{children:L},u++)),s.push(l(c,{inverse:!0,children:n},u++)),s.push(l(c,{children:i.slice(f,a)},u++)),s.push(l(c,{inverse:!0,children:i[a]??" "},u++)),s.push(l(c,{children:i.slice(a+1)},u++))),l(T,{children:s})}return m(T,{children:[L,l(c,{inverse:!0,children:n}),S]})}x(B,"Y");D(B,"renderLine");export{J as Textarea,J as default};

package/dist/components/timer.d.ts

@@ -0,0 +1,59 @@
+import { Ref, ReactElement } from 'react';
+import { UseTimerResult } from "../ink/hooks/use-timer.js";
+type TimerRef = Omit<UseTimerResult, "isFinished" | "isRunning" | "remaining">;
+type Props = {
+  /**
+  * Whether to start the timer immediately.
+  * @default false
+  */
+  readonly autoStart?: boolean;
+  /**
+  * Make the rendered text bold.
+  */
+  readonly bold?: boolean;
+  /**
+  * Text color for the rendered time.
+  */
+  readonly color?: string;
+  /**
+  * Total countdown duration in milliseconds.
+  */
+  readonly duration: number;
+  /**
+  * Custom formatter for the remaining time.
+  * Receives remaining milliseconds, returns a display string.
+  * @default formatDuration (MM:SS or HH:MM:SS)
+  */
+  readonly format?: (remaining: number) => string;
+  /**
+  * Tick interval in milliseconds.
+  * @default 1000
+  */
+  readonly interval?: number;
+  /**
+  * Called once when the timer reaches zero.
+  */
+  readonly onTimeout?: () => void;
+  readonly ref?: Ref<TimerRef>;
+};
+/**
+* A countdown timer component.
+*
+* Exposes `start`, `stop`, `toggle`, and `reset` methods via ref.
+*
+* ```tsx
+* const ref = useRef&lt;TimerRef>(null);
+* &lt;Timer ref={ref} duration={60_000} autoStart />
+* ```
+*/
+declare const Timer: ({
+  autoStart,
+  bold,
+  color,
+  duration,
+  format,
+  interval,
+  onTimeout,
+  ref
+}: Props) => ReactElement;
+export { Props, Timer, type Props as TimerProps, TimerRef, Timer as default };

package/dist/components/timer.js

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

package/dist/components/toast.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "../packem_shared/variant-config.d-D5NnrrQK.js";
+type ToastVariant = Variant;
+type Props = {
+  /**
+  * Toast body.
+  */
+  readonly children: ReactNode;
+  /**
+  * Milliseconds to display before auto-dismissing. Use `0` to disable.
+  * @default 4000
+  */
+  readonly duration?: number;
+  /**
+  * Called after the toast dismisses itself.
+  */
+  readonly onDismiss?: () => void;
+  /**
+  * Optional title rendered before the body.
+  */
+  readonly title?: string;
+  /**
+  * Visual variant determining the icon and border color.
+  * @default "info"
+  */
+  readonly variant?: ToastVariant;
+  /**
+  * Manually control visibility. When provided, `duration` is ignored.
+  */
+  readonly visible?: boolean;
+  /**
+  * Optional width override.
+  */
+  readonly width?: number;
+};
+/**
+* Ephemeral notification. Disappears automatically after `duration` ms.
+* @returns A bordered `ReactElement` while visible; `null` once dismissed.
+*/
+declare function Toast({
+  children,
+  duration,
+  onDismiss,
+  title,
+  variant,
+  visible,
+  width
+}: Props): ReactElement | null;
+export { Props, Toast, type Props as ToastProps, ToastVariant, Toast as default };

package/dist/components/toast.js

@@ -0,0 +1 @@
+var T=Object.defineProperty;var i=(e,r)=>T(e,"name",{value:r,configurable:!0});import{jsxs as a,jsx as n}from"react/jsx-runtime";import{useState as g,useRef as j,useEffect as w}from"react";import{Box as f}from"./box.js";import{Text as c}from"./text.js";import{o as y}from"../packem_shared/variant-config-BJqpNo7H.js";var D=Object.defineProperty,R=i((e,r)=>D(e,"name",{value:r,configurable:!0}),"f");function S({children:e,duration:r=4e3,onDismiss:l,title:s,variant:m="info",visible:o,width:p}){const[h,v]=g(!0),t=o??h,u=j(l);if(u.current=l,w(()=>{if(o!==void 0||r<=0||!t)return;const x=setTimeout(()=>{v(!1),u.current?.()},r);return()=>{clearTimeout(x)}},[r,o,t]),!t)return null;const{color:d,icon:b}=y[m];return a(f,{borderColor:d,borderStyle:"round",gap:1,paddingX:1,width:p,children:[n(c,{color:d,children:b}),a(f,{flexDirection:"column",flexGrow:1,children:[s===void 0?void 0:n(c,{bold:!0,children:s}),n(c,{children:e})]})]})}i(S,"c");R(S,"Toast");export{S as Toast,S as default};

package/dist/components/tooltip.d.ts

@@ -0,0 +1,43 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type TooltipPlacement = "bottom" | "left" | "right" | "top";
+type Props = {
+  /**
+  * The element the tooltip is attached to.
+  */
+  readonly children: ReactNode;
+  /**
+  * Border color.
+  * @default "gray"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Tooltip body content.
+  */
+  readonly content: ReactNode;
+  /**
+  * Controls whether the tooltip is rendered.
+  * @default true
+  */
+  readonly isVisible?: boolean;
+  /**
+  * Relative position. Terminal rendering does not support floating layers,
+  * so the tooltip is placed inline next to (or above / below) the anchor.
+  * @default "right"
+  */
+  readonly placement?: TooltipPlacement;
+};
+/**
+* Renders supplementary text next to an anchor. Because terminals don't have
+* a floating-layer concept, the tooltip lives inline in the layout. Hide it
+* by toggling `isVisible`.
+*/
+declare function Tooltip({
+  children,
+  color,
+  content,
+  isVisible,
+  placement
+}: Props): ReactElement;
+export { Props, Tooltip, TooltipPlacement, type Props as TooltipProps, Tooltip as default };

package/dist/components/tooltip.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var t=(e,r)=>a(e,"name",{value:r,configurable:!0});import{jsx as n,jsxs as m}from"react/jsx-runtime";import{Box as l}from"./box.js";import{Text as x}from"./text.js";var p=Object.defineProperty,u=t((e,r)=>p(e,"name",{value:r,configurable:!0}),"d");const g={bottom:{flexDirection:"column",orderFirst:!1},left:{flexDirection:"row",orderFirst:!0},right:{flexDirection:"row",orderFirst:!1},top:{flexDirection:"column",orderFirst:!0}};function h({children:e,color:r="gray",content:o,isVisible:s=!0,placement:i="right"}){const{flexDirection:f,orderFirst:c}=g[i],d=s?n(l,{borderColor:r,borderStyle:"round",flexShrink:0,marginLeft:i==="right"?1:0,marginRight:i==="left"?1:0,paddingX:1,children:typeof o=="string"?n(x,{color:r,children:o}):o}):void 0;return m(l,{alignItems:"center",flexDirection:f,children:[c?d:void 0,n(l,{children:e}),c?void 0:d]})}t(h,"a");u(h,"Tooltip");export{h as Tooltip,h as default};

package/dist/components/transform.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+  * Screen-reader-specific text to output. If this is set, all children will be ignored.
+  */
+  readonly accessibilityLabel?: string;
+  readonly children?: ReactNode;
+  /**
+  * Function that transforms children output. It accepts children and must return transformed children as well. Note that when children use `<Text>` styling props (e.g. `color`, `bold`), the string will contain ANSI escape codes.
+  */
+  readonly transform: (children: string, index: number) => string;
+};
+/**
+* Transform a string representation of React components before they're written to output. For example, you might want to apply a gradient to text, add a clickable link, or create some text effects. These use cases can't accept React nodes as input; they expect a string. That's what the <Transform> component does: it gives you an output string of its child components and lets you transform it in any way.
+*/
+declare function Transform({
+  accessibilityLabel,
+  children,
+  transform
+}: Props): ReactElement | null;
+export { Props, Transform, type Props as TransformProps, Transform as default };

package/dist/components/transform.js

@@ -0,0 +1 @@
+var o=Object.defineProperty;var n=(r,e)=>o(r,"name",{value:e,configurable:!0});import{jsx as a}from"react/jsx-runtime";import{useContext as l}from"react";import{a as s}from"../packem_shared/accessibility-context-DDyHTwmA.js";var f=Object.defineProperty,c=n((r,e)=>f(r,"name",{value:e,configurable:!0}),"t");const m={flexDirection:"row",flexGrow:0,flexShrink:1};function u({accessibilityLabel:r,children:e,transform:t}){const{isScreenReaderEnabled:i}=l(s);return e==null?null:a("ink-text",{internal_transform:t,style:m,children:i&&r?r:e})}n(u,"n");c(u,"Transform");export{u as Transform,u as default};

package/dist/components/transition.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode, ReactElement } from 'react';
+type TransitionPreset = "fade" | "reveal" | "slide-down" | "slide-left" | "slide-right" | "slide-up";
+type TransitionPhase = "entered" | "entering" | "exited" | "exiting";
+type Props = {
+  /**
+  * Content to animate.
+  */
+  readonly children: ReactNode;
+  /**
+  * For slide presets, how many characters of offset to animate across.
+  * For the `reveal` preset, the maximum row count to scale through.
+  * @default 4
+  */
+  readonly distance?: number;
+  /**
+  * Duration of both enter and exit transitions, in milliseconds.
+  * @default 240
+  */
+  readonly duration?: number;
+  /**
+  * Called once the exit animation finishes (i.e. the component has fully
+  * transitioned out). AnimatePresence uses this to unmount the wrapper.
+  */
+  readonly onExit?: () => void;
+  /**
+  * Animation preset controlling how the content appears/disappears.
+  * @default "fade"
+  */
+  readonly preset?: TransitionPreset;
+  /**
+  * Controls the target phase. `true` drives towards `entered`, `false`
+  * drives towards `exited`. Flip the value to trigger animation.
+  * @default true
+  */
+  readonly show?: boolean;
+  /**
+  * Tick interval in milliseconds. Lower values yield smoother animation
+  * at the cost of CPU.
+  * @default 30
+  */
+  readonly tickInterval?: number;
+};
+type TransitionComponent = ((props: Props) => ReactElement | null) & {
+  isAnimatable: true;
+};
+/**
+* Animate a child's entry and exit using a TUI-friendly preset. Drive via
+* `show`; the component toggles between enter and exit, fires `onExit` once
+* the exit animation completes.
+*
+* **Fade preset note:** `dimColor` is only applied when the child is a plain
+* string. Non-string children (Box trees, other components) pass through
+* untouched during the transition — wrap them in `<Text>` if you need the
+* fade effect.
+* @returns A `ReactElement` rendering the transitioning child, or `null`
+* once a hidden transition has fully completed.
+*/
+declare function Transition({
+  children,
+  distance,
+  duration,
+  onExit,
+  preset,
+  show,
+  tickInterval
+}: Props): ReactElement | null;
+/**
+* Static marker used by `AnimatePresence` to recognize Transition children
+* even when the consumer hasn't explicitly passed a `show` prop. Consumers
+* can apply the same marker to their own wrappers (`MyWrapper.isAnimatable
+* = true`) to opt them into animation orchestration.
+*/
+declare const TransitionWithMarker: TransitionComponent;
+export { Props, Transition, TransitionPhase, TransitionPreset, type Props as TransitionProps, TransitionWithMarker as default };

package/dist/components/transition.js

@@ -0,0 +1 @@
+var k=Object.defineProperty;var v=(r,e)=>k(r,"name",{value:e,configurable:!0});import{jsx as t}from"react/jsx-runtime";import{useState as b,useRef as s,useEffect as y}from"react";import{Box as c}from"./box.js";import{Text as A}from"./text.js";var E=Object.defineProperty,o=v((r,e)=>E(r,"name",{value:e,configurable:!0}),"u");const F=o((r,e)=>r>=1?t(c,{children:e}):r<=0?t(c,{}):t(c,{children:typeof e=="string"?t(A,{dimColor:r<.7,children:e}):e}),"renderFade"),C=o((r,e)=>Math.max(0,Math.min(e,Math.round((1-r)*e))),"slideOffset"),h=o((r,e)=>(i,a,m)=>{const n=C(i,m);return i>=1?t(c,{children:a}):i<=0?t(c,{}):r==="x"?t(c,{paddingLeft:e===1?n:0,paddingRight:e===-1?n:0,children:a}):t(c,{flexDirection:"column",paddingBottom:e===-1?n:0,paddingTop:e===1?n:0,children:a})},"renderSlide"),K=o((r,e,i)=>{if(r>=1)return t(c,{children:e});if(r<=0)return t(c,{});const a=Math.max(0,Math.min(i,Math.round(r*i)));return t(c,{flexDirection:"column",height:a,overflowY:"hidden",children:e})},"renderReveal"),L={fade:F,reveal:K,"slide-down":h("y",-1),"slide-left":h("x",-1),"slide-right":h("x",1),"slide-up":h("y",1)},N=o((r,e)=>r?e>=1?"entered":"entering":e<=0?"exited":"exiting","resolvePhase");function I({children:r,distance:e=4,duration:i=240,onExit:a,preset:m="fade",show:n=!0,tickInterval:M=30}){const[x,O]=b(n?1:0),p=s(n?1:0),w=s(Date.now()),l=s(n?1:0),d=s(!n),g=s(a);g.current=a;const[R,T]=b(0);if(y(()=>{const u=n?1:0;p.current!==u&&(p.current=u,w.current=Date.now(),l.current=x,d.current=!1,T(f=>f+1))},[n]),y(()=>{const u=p.current;if(l.current===u){u===0&&!d.current&&(d.current=!0,g.current?.());return}const f=setInterval(()=>{const B=Date.now()-w.current,D=i<=0?1:Math.min(1,B/i),S=l.current+(u-l.current)*D;O(S),D>=1&&(clearInterval(f),u===0&&!d.current&&(d.current=!0,g.current?.()))},M);return()=>{clearInterval(f)}},[R,i,M]),N(n,x)==="exited"&&!n)return null;const j=L[m];return j(x,r,e)}v(I,"h");o(I,"Transition");const H=Object.assign(I,{isAnimatable:!0});export{I as Transition,H as default};