@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/button.d.ts

@@ -0,0 +1,38 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ButtonVariant = "ghost" | "outline" | "primary" | "secondary";
+type Props = {
+  /**
+   * Accent color used when the button is focused.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Focus this button when mounted if nothing else is focused.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Button label.
+   */
+  readonly children: ReactNode;
+  /**
+   * When true, the button ignores input and is rendered dim.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called when the user presses Enter or Space while the button has focus.
+   */
+  readonly onPress?: () => void;
+  /**
+   * Visual style.
+   * @default "primary"
+   */
+  readonly variant?: ButtonVariant;
+};
+/**
+ * Focusable button. Triggers `onPress` on Enter / Space.
+ * @returns A `ReactElement` rendering the button (bordered or ghost variant).
+ */
+declare function Button({ accentColor, autoFocus, children, isDisabled, onPress, variant }: Props): ReactElement;
+export { Button, type Props as ButtonProps, ButtonVariant, Props, Button as default };

package/dist/button.js

@@ -0,0 +1 @@
+import{jsx as s,jsxs as f}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import e from"@visulima/tui/components/text";import p from"@visulima/tui/hooks/use-focus";import b from"@visulima/tui/hooks/use-input";import{useCallback as g}from"react";const h="round",y=(i,l,n,r)=>{if(!n){if(i==="primary"&&l)return"black";if(l)return r}};function A({accentColor:i="blue",autoFocus:l=!1,children:n,isDisabled:r=!1,onPress:t,variant:d="primary"}){const{isFocused:o}=p({autoFocus:l,isActive:!r});b(g((m,u)=>{o&&(u.return||m===" ")&&t?.()},[o,t]),{isActive:!r&&o});const a=y(d,o,r,i);return d==="ghost"?s(c,{paddingX:1,children:f(e,{bold:o,color:a,dimColor:r,children:[o?"▸ ":"  ",n]})}):s(c,{backgroundColor:d==="primary"&&o?i:void 0,borderColor:d==="outline"?o?i:"gray":d==="secondary"||o?i:void 0,borderStyle:h,paddingX:1,children:s(e,{bold:o,color:a,dimColor:r,children:n})})}export{A as Button,A as default};

package/dist/calendar.d.ts

@@ -0,0 +1,60 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Accent color for today / the focused cell.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus the grid on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Initial focused day when uncontrolled. Defaults to `value` or today.
+   */
+  readonly defaultValue?: Date;
+  /**
+   * First day of the week: 0 = Sunday, 1 = Monday.
+   * @default 1
+   */
+  readonly firstDayOfWeek?: 0 | 1;
+  /**
+   * When true, disable input and render the grid dim.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Upper bound; days after `maxDate` cannot be selected.
+   */
+  readonly maxDate?: Date;
+  /**
+   * Lower bound; days before `minDate` cannot be selected.
+   */
+  readonly minDate?: Date;
+  /**
+   * Called whenever the user navigates or selects a day.
+   */
+  readonly onChange?: (date: Date) => void;
+  /**
+   * Called when the user presses Enter.
+   */
+  readonly onSubmit?: (date: Date) => void;
+  /**
+   * Color used to mark the currently selected day.
+   * @default "green"
+   */
+  readonly selectedColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Controlled selected date.
+   */
+  readonly value?: Date;
+};
+/**
+ * Month-grid date picker. Arrow keys move focus by one day, page up/down move
+ * by month. Enter submits; Space or Enter selects.
+ * @returns A bordered `ReactElement` containing the month header, weekday
+ * labels, and the day grid.
+ */
+declare function Calendar({ accentColor, autoFocus, defaultValue, firstDayOfWeek, isDisabled, maxDate, minDate, onChange, onSubmit, selectedColor, value }: Props): ReactElement;
+export { Calendar, type Props as CalendarProps, Props, Calendar as default };

package/dist/calendar.js

@@ -0,0 +1 @@
+import{jsxs as y,jsx as u}from"react/jsx-runtime";import h from"@visulima/tui/components/box";import w from"@visulima/tui/components/text";import W from"@visulima/tui/hooks/use-focus";import I from"@visulima/tui/hooks/use-input";import{useMemo as F,useState as K,useRef as P,useCallback as S}from"react";const X=["January","February","March","April","May","June","July","August","September","October","November","December"],k=["Su","Mo","Tu","We","Th","Fr","Sa"],p=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()),x=(e,r)=>{const i=e.getFullYear(),l=e.getMonth()+r,g=new Date(i,l+1,0).getDate(),a=Math.min(e.getDate(),g);return new Date(i,l,a)},J=(e,r)=>e.getFullYear()===r.getFullYear()&&e.getMonth()===r.getMonth()&&e.getDate()===r.getDate(),T=(e,r,i)=>r!==void 0&&e<p(r)||i!==void 0&&e>p(i),$=(e,r,i)=>{const l=(new Date(e,r,1).getDay()-i+7)%7,g=new Date(e,r+1,0).getDate(),a=[];for(let o=0;o<l;o+=1)a.push(void 0);for(let o=1;o<=g;o+=1)a.push(new Date(e,r,o));for(;a.length%7!==0;)a.push(void 0);const D=[];for(let o=0;o<a.length;o+=7)D.push(a.slice(o,o+7));return D};function Z({accentColor:e="blue",autoFocus:r=!1,defaultValue:i,firstDayOfWeek:l=1,isDisabled:g=!1,maxDate:a,minDate:D,onChange:o,onSubmit:b,selectedColor:j="green",value:f}){const{isFocused:m}=W({autoFocus:r,isActive:!g}),M=F(()=>p(new Date),[]),O=p(f??i??M),[B,E]=K(O),c=f?p(f):B,v=P(c);v.current=c;const N=F(()=>[...k.slice(l),...k.slice(0,l)],[l]),R=F(()=>$(c.getFullYear(),c.getMonth(),l),[c,l]),d=S(s=>{const n=p(s);T(n,D,a)||(f===void 0&&E(n),o?.(n))},[f,o,D,a]);I(S((s,n)=>{if(!m)return;const{current:t}=v;n.leftArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()-1)):n.rightArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()+1)):n.upArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()-7)):n.downArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()+7)):n.pageUp?d(x(t,-1)):n.pageDown?d(x(t,1)):n.return&&b?.(t)},[m,d,b]),{isActive:!g&&m});const U=`${X[c.getMonth()]} ${c.getFullYear()}`;return y(h,{borderColor:m?e:void 0,borderStyle:"round",flexDirection:"column",paddingX:1,children:[u(h,{justifyContent:"center",children:u(w,{bold:!0,color:e,children:U})}),u(h,{marginTop:1,children:N.map(s=>u(h,{width:3,children:u(w,{dimColor:!0,children:s.padEnd(2," ")})},s))}),R.map((s,n)=>u(h,{children:s.map((t,C)=>{if(t===void 0)return u(h,{width:3,children:u(w,{children:"   "})},C);const Y=J(t,M),A=J(t,c),V=T(t,D,a);return u(h,{width:3,children:y(w,{backgroundColor:A&&m?e:void 0,bold:Y,color:A&&m?"black":Y?j:void 0,dimColor:V||g,children:[String(t.getDate()).padStart(2," ")," "]})},C)})},n))]})}export{Z as Calendar,Z as default};

package/dist/card.d.ts

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Border color.
+   */
+  readonly borderColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Border style name, passed through to `Box`.
+   * @default "round"
+   */
+  readonly borderStyle?: "arrow" | "bold" | "classic" | "double" | "doubleSingle" | "round" | "single" | "singleDouble";
+  /**
+   * Card body.
+   */
+  readonly children: ReactNode;
+  /**
+   * Optional footer rendered below body with a dim divider.
+   */
+  readonly footer?: ReactNode;
+  /**
+   * Optional content rendered after the title on the same row.
+   */
+  readonly headerRight?: ReactNode;
+  /**
+   * Optional subtitle rendered below the title.
+   */
+  readonly subtitle?: string;
+  /**
+   * Optional title rendered in the header area.
+   */
+  readonly title?: string;
+  /**
+   * Color applied to the title.
+   */
+  readonly titleColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Fix the card width. When omitted the card grows to fill its parent.
+   */
+  readonly width?: number | string;
+};
+/**
+ * Bordered container with optional title, subtitle, and footer.
+ */
+declare function Card({ borderColor, borderStyle, children, footer, headerRight, subtitle, title, titleColor, width }: Props): ReactElement;
+export { Card, type Props as CardProps, Props, Card as default };

package/dist/card.js

@@ -0,0 +1 @@
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import c from"@visulima/tui/components/text";import{Divider as v}from"./divider.js";function x({borderColor:m,borderStyle:h="round",children:f,footer:n,headerRight:e,subtitle:d,title:t,titleColor:u,width:l}){return r(o,{borderColor:m,borderStyle:h,flexDirection:"column",paddingX:1,width:l,children:[t!==void 0||d!==void 0||e!==void 0?r(o,{flexDirection:"column",marginBottom:1,children:[r(o,{justifyContent:"space-between",children:[i(o,{children:t===void 0?void 0:i(c,{bold:!0,color:u,children:t})}),e===void 0?void 0:i(o,{children:e})]}),d===void 0?void 0:i(c,{dimColor:!0,children:d})]}):void 0,i(o,{flexDirection:"column",children:f}),n===void 0?void 0:r(o,{flexDirection:"column",marginTop:1,children:[i(v,{dimColor:!0,length:typeof l=="number"?Math.max(1,l-4):void 0}),i(o,{marginTop:1,children:n})]})]})}export{x as Card,x as default};

package/dist/checkbox-group.d.ts

@@ -0,0 +1,50 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type CheckboxOption = {
+  readonly description?: string;
+  readonly isDisabled?: boolean;
+  readonly label: string;
+  readonly value: string;
+};
+type Props = {
+  /**
+   * Accent color for the focused row and checked marks.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Checked values when uncontrolled.
+   */
+  readonly defaultValue?: ReadonlyArray<string>;
+  /**
+   * Disable the whole group.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Fires whenever the set of checked values changes.
+   */
+  readonly onChange?: (values: ReadonlyArray<string>) => void;
+  /**
+   * Fires on Enter with the current checked values.
+   */
+  readonly onSubmit?: (values: ReadonlyArray<string>) => void;
+  /**
+   * The options to render.
+   */
+  readonly options: ReadonlyArray<CheckboxOption>;
+  /**
+   * Controlled checked values. When provided, `defaultValue` is ignored.
+   */
+  readonly value?: ReadonlyArray<string>;
+};
+/**
+ * A vertical list of checkboxes. ↑/↓ move focus, Space toggles the focused
+ * option, `a` toggles all, and Enter submits.
+ */
+declare function CheckboxGroup({ accentColor, autoFocus, defaultValue, isDisabled, onChange, onSubmit, options, value: controlledValue }: Props): ReactElement;
+export { CheckboxGroup, type Props as CheckboxGroupProps, CheckboxOption, Props, CheckboxGroup as default };

package/dist/checkbox-group.js

@@ -0,0 +1 @@
+import{jsx as c,jsxs as g}from"react/jsx-runtime";import v from"@visulima/tui/components/box";import h from"@visulima/tui/components/text";import R from"@visulima/tui/hooks/use-focus";import E from"@visulima/tui/hooks/use-input";import{useState as F,useMemo as G,useRef as I,useCallback as j}from"react";const M=[];function k(u,s){return s===0?0:(u%s+s)%s}function K({accentColor:u="blue",autoFocus:s=!1,defaultValue:y=M,isDisabled:p=!1,onChange:b,onSubmit:D,options:t,value:d}){const{isFocused:C}=R({autoFocus:s,isActive:!p}),w=d!==void 0,[x,B]=F(y),n=G(()=>new Set(d??x),[d,x]),[f,A]=F(0),S=I(b);S.current=b;const m=j(r=>{const o=t.map(e=>e.value).filter(e=>r.has(e));return w||B(o),S.current?.(o),o},[w,t]),L=j((r,o)=>{if(o.upArrow){A(e=>k(e-1,t.length));return}if(o.downArrow){A(e=>k(e+1,t.length));return}if(r===" "){const e=t[f];if(e===void 0||e.isDisabled)return;const a=new Set(n);a.has(e.value)?a.delete(e.value):a.add(e.value),m(a);return}if(r==="a"){const e=t.filter(i=>!i.isDisabled),a=e.every(i=>n.has(i.value)),l=new Set(t.filter(i=>i.isDisabled&&n.has(i.value)).map(i=>i.value));if(!a)for(const i of e)l.add(i.value);m(l);return}o.return&&D?.(t.map(e=>e.value).filter(e=>n.has(e)))},[n,f,m,D,t]);return E(L,{isActive:C&&!p}),c(v,{flexDirection:"column",children:t.map((r,o)=>{const e=C&&o===f,a=n.has(r.value),l=a?"◉":"◯",i=!r.isDisabled&&(a||e)?u:void 0;return g(v,{children:[c(h,{color:e?u:void 0,children:e?"❯ ":"  "}),g(h,{color:i,dimColor:r.isDisabled,children:[l," ",r.label]}),r.description===void 0?void 0:c(v,{marginLeft:1,children:c(h,{dimColor:!0,children:r.description})})]},o)})})}export{K as CheckboxGroup,K as default};

package/dist/checkbox.d.ts

@@ -0,0 +1,40 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Accent color when focused.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus when mounted if nothing else is focused.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Label rendered next to the checkbox.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Initial checked state when uncontrolled.
+   * @default false
+   */
+  readonly defaultChecked?: boolean;
+  /**
+   * Controlled checked state. When provided, `onChange` should update the parent.
+   */
+  readonly isChecked?: boolean;
+  /**
+   * Disable input and dim the label.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Fired when the checkbox toggles.
+   */
+  readonly onChange?: (checked: boolean) => void;
+};
+/**
+ * Focusable checkbox. Toggles with Space or Enter.
+ */
+declare function Checkbox({ accentColor, autoFocus, children, defaultChecked, isChecked, isDisabled, onChange }: Props): ReactElement;
+export { Checkbox, type Props as CheckboxProps, Props, Checkbox as default };

package/dist/checkbox.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as v}from"react/jsx-runtime";import C from"@visulima/tui/components/box";import a from"@visulima/tui/components/text";import b from"@visulima/tui/hooks/use-focus";import k from"@visulima/tui/hooks/use-input";import{useState as x,useCallback as F}from"react";const g="☒",j="☐";function w({accentColor:s="blue",autoFocus:m=!1,children:c,defaultChecked:u=!1,isChecked:e,isDisabled:i=!1,onChange:t}){const{isFocused:o}=b({autoFocus:m,isActive:!i}),[f,n]=x(u),r=e??f;return k(F((h,p)=>{if(o&&(p.return||h===" ")){const d=!r;e===void 0&&n(d),t?.(d)}},[o,r,e,t]),{isActive:!i&&o}),l(C,{gap:1,children:[l(a,{color:o?s:void 0,dimColor:i,children:[o?"▸ ":"  ",r?g:j]}),c===void 0?void 0:v(a,{color:o?s:void 0,dimColor:i,children:c})]})}export{w as Checkbox,w as default};

package/dist/code.d.ts

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+   * The source code string to highlight.
+   */
+  readonly code: string;
+  /**
+   * Set of line numbers to visually emphasize.
+   */
+  readonly highlightLines?: ReadonlySet<number>;
+  /**
+   * Programming language for syntax highlighting.
+   * Falls back to plain text if the language is unknown.
+   */
+  readonly language?: string;
+  /**
+   * Whether to show line numbers in the gutter.
+   * @default false
+   */
+  readonly showLineNumbers?: boolean;
+  /**
+   * Starting line number (useful for code excerpts).
+   * @default 1
+   */
+  readonly startLine?: number;
+  /**
+   * Shiki theme name.
+   * @default "github-dark-default"
+   */
+  readonly theme?: string;
+};
+/**
+ * Render source code with syntax highlighting.
+ *
+ * ```tsx
+ * &lt;Code code="const x = 42;" language="typescript" />
+ * &lt;Code code={source} language="python" showLineNumbers />
+ * ```
+ */
+declare function Code({ code, highlightLines, language, showLineNumbers, startLine, theme }: Props): ReactElement;
+export { Code, type Props as CodeProps, Props, Code as default };

package/dist/code.js

@@ -0,0 +1,2 @@
+import{jsx as m,jsxs as d}from"react/jsx-runtime";import p from"@visulima/tui/components/box";import L from"@visulima/tui/components/text";import{resolveLanguage as S,isLanguageSupported as w,getHighlighter as b,getCachedTokens as v,tokenLinesToElements as y}from"@visulima/tui/highlighter";import{useState as C,useRef as T,useEffect as j}from"react";function q({code:o,highlightLines:c,language:i,showLineNumbers:s=!1,startLine:l=1,theme:u="github-dark-default"}){const[h,a]=C(null),t=T(!1);j(()=>{t.current=!1;const e=i?S(i):"text";if(e!=="text"&&!w(e)){a(null);return}return(async()=>{try{const r=await b(e==="text"?[]:[e],u),n=v(r,o,e,u);t.current||a(n.tokens)}catch{t.current||a(null)}})(),()=>{t.current=!0}},[o,i,u]);const x={highlightLines:c,showLineNumbers:s,startLine:l};if(h)return y(h,x);const f=o.split(`
+`),k=s?String(l+f.length-1).length:0;return m(p,{flexDirection:"column",children:f.map((e,r)=>{const n=l+r,g=c?.has(n)??!1;return d(p,{children:[s?d(L,{color:g?"yellow":void 0,dimColor:!g,children:[String(n).padStart(k)," "]}):void 0,m(L,{children:e})]},r)})})}export{q as Code,q as default};

package/dist/collapsible.d.ts

@@ -0,0 +1,44 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Accent color when the header is focused.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus the collapsible on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Child content rendered when open.
+   */
+  readonly children: ReactNode;
+  /**
+   * Whether the section starts expanded.
+   * @default false
+   */
+  readonly defaultOpen?: boolean;
+  /**
+   * Disable interaction.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Controlled open state.
+   */
+  readonly isOpen?: boolean;
+  /**
+   * Called when the user toggles the section.
+   */
+  readonly onToggle?: (isOpen: boolean) => void;
+  /**
+   * Header label.
+   */
+  readonly title: ReactNode;
+};
+/**
+ * Focusable section that can be expanded or collapsed.
+ */
+declare function Collapsible({ accentColor, autoFocus, children, defaultOpen, isDisabled, isOpen, onToggle, title }: Props): ReactElement;
+export { Collapsible, type Props as CollapsibleProps, Props, Collapsible as default };

package/dist/collapsible.js

@@ -0,0 +1 @@
+import{jsxs as d,jsx as l}from"react/jsx-runtime";import t from"@visulima/tui/components/box";import m from"@visulima/tui/components/text";import C from"@visulima/tui/hooks/use-focus";import D from"@visulima/tui/hooks/use-input";import{useState as g,useCallback as F}from"react";function S({accentColor:c="blue",autoFocus:f=!1,children:a,defaultOpen:u=!1,isDisabled:o=!1,isOpen:r,onToggle:s,title:p}){const{isFocused:i}=C({autoFocus:f,isActive:!o}),[b,h]=g(u),e=r??b;return D(F((v,x)=>{if(x.return||v===" "){const n=!e;r===void 0&&h(n),s?.(n)}},[e,r,s]),{isActive:!o&&i}),d(t,{flexDirection:"column",children:[d(t,{children:[l(m,{color:i?c:void 0,dimColor:o,children:e?"▼ ":"▶ "}),l(m,{bold:i,color:i?c:void 0,dimColor:o,children:p})]}),e?l(t,{flexDirection:"column",marginLeft:2,children:a}):void 0]})}export{S as Collapsible,S as default};

package/dist/color-picker.d.ts

@@ -0,0 +1,59 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Color = LiteralUnion<AnsiColors, string>;
+type Props = {
+  /**
+   * Accent color for the focused-cell outline.
+   * @default "blue"
+   */
+  readonly accentColor?: Color;
+  /**
+   * Auto-focus on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Number of swatches per row.
+   * @default 8
+   */
+  readonly columns?: number;
+  /**
+   * Selected color when uncontrolled.
+   */
+  readonly defaultValue?: Color;
+  /**
+   * Disable input and dim the grid.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Fires when the highlighted swatch changes.
+   */
+  readonly onChange?: (color: Color) => void;
+  /**
+   * Fires on Enter with the highlighted swatch.
+   */
+  readonly onSubmit?: (color: Color) => void;
+  /**
+   * Colors to offer. Defaults to the 16 standard ANSI colors.
+   */
+  readonly palette?: ReadonlyArray<Color>;
+  /**
+   * Render the highlighted color's name beneath the grid.
+   * @default true
+   */
+  readonly showName?: boolean;
+  /**
+   * The two-cell glyph filled with each palette color (default `"██"`).
+   */
+  readonly swatch?: string;
+  /**
+   * Controlled selected color. When provided, `defaultValue` is ignored.
+   */
+  readonly value?: Color;
+};
+/**
+ * A grid of color swatches. Arrow keys move the highlight, Enter selects. The
+ * highlighted swatch's name is shown below the grid by default.
+ */
+declare function ColorPicker({ accentColor, autoFocus, columns, defaultValue, isDisabled, onChange, onSubmit, palette, showName, swatch, value: controlledValue }: Props): ReactElement;
+export { ColorPicker, type Props as ColorPickerProps, Props, ColorPicker as default };

package/dist/color-picker.js

@@ -0,0 +1 @@
+import{jsxs as C,jsx as n}from"react/jsx-runtime";import s from"@visulima/tui/components/box";import h from"@visulima/tui/components/text";import E from"@visulima/tui/hooks/use-focus";import H from"@visulima/tui/hooks/use-input";import{useState as L,useRef as P,useCallback as b}from"react";const R=["black","red","green","yellow","blue","magenta","cyan","white","gray","redBright","greenBright","yellowBright","blueBright","magentaBright","cyanBright","whiteBright"];function T(a,i){return i===0?0:(a%i+i)%i}function K({accentColor:a="blue",autoFocus:i=!1,columns:y=8,defaultValue:A,isDisabled:m=!1,onChange:f,onSubmit:p,palette:e=R,showName:k=!0,swatch:F="██",value:d}){const{isFocused:w}=E({autoFocus:i,isActive:!m}),g=d!==void 0,o=Math.max(1,y),M=Math.max(0,e.indexOf(d??A)),[D,S]=L(M),l=g?Math.max(0,e.indexOf(d)):D,x=P(f);x.current=f;const c=b(t=>{if(e.length===0)return;const r=T(l+t,e.length);g||S(r),x.current?.(e[r])},[l,g,e]),j=b((t,r)=>{r.leftArrow?c(-1):r.rightArrow?c(1):r.upArrow?c(-o):r.downArrow?c(o):r.return&&p?.(e[l])},[o,l,c,p,e]);H(j,{isActive:w&&!m});const B=[];for(let t=0;t<e.length;t+=o)B.push(e.slice(t,t+o));return C(s,{flexDirection:"column",children:[B.map((t,r)=>n(s,{children:t.map((N,v)=>{const O=r*o+v,u=w&&O===l;return C(s,{children:[n(h,{color:u?a:void 0,children:u?"[":" "}),n(h,{color:N,dimColor:m,children:F}),n(h,{color:u?a:void 0,children:u?"]":" "})]},v)})},r)),k?n(s,{marginTop:1,children:n(h,{dimColor:!0,children:String(e[l]??"")})}):void 0]})}export{K as ColorPicker,K as default};

package/dist/command-block.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, ReactElement } from 'react';
+type CommandStatus = "error" | "idle" | "running" | "success";
+type Props = {
+  /**
+   * Shell command rendered in the header.
+   */
+  readonly command: string;
+  /**
+   * Optional working directory shown after the command name.
+   */
+  readonly cwd?: string;
+  /**
+   * Duration in ms; shown when finished.
+   */
+  readonly durationMs?: number;
+  /**
+   * Exit code of the completed command.
+   */
+  readonly exitCode?: number;
+  /**
+   * Max output rows rendered before truncation. Use `Infinity` to disable.
+   */
+  readonly maxOutputRows?: number;
+  /**
+   * Command output. Either a string (rendered as-is) or arbitrary children.
+   */
+  readonly output?: ReactNode;
+  /**
+   * Lifecycle state. Controls the header icon and color.
+   * @default "idle"
+   */
+  readonly status?: CommandStatus;
+};
+/**
+ * Renders a shell command with its output and a status header. Designed for
+ * coding-agent UIs that stream terminal operations.
+ */
+declare function CommandBlock({ command, cwd, durationMs, exitCode, maxOutputRows, output, status }: Props): ReactElement;
+export { CommandBlock, type Props as CommandBlockProps, CommandStatus, Props, CommandBlock as default };

package/dist/command-block.js

@@ -0,0 +1,4 @@
+import{jsxs as d,jsx as e}from"react/jsx-runtime";import l from"@visulima/tui/components/box";import o from"@visulima/tui/components/text";import{Spinner as a}from"./spinner.js";const f={error:"red",idle:"gray",running:"cyan",success:"green"},g=r=>r<1e3?`${Math.round(r)}ms`:`${(r/1e3).toFixed(2)}s`,x=r=>r==="running"?e(a,{type:"dots"}):{error:"✖",idle:"$",success:"✔"}[r],v=(r,i)=>{if(!Number.isFinite(i))return r;const n=r.split(`
+`);if(n.length<=i)return r;const t=n.slice(0,i).join(`
+`),c=n.length-i;return`${t}
+… ${c} more line${c===1?"":"s"}`};function w({command:r,cwd:i,durationMs:n,exitCode:t,maxOutputRows:c=12,output:s,status:m="idle"}){const h=f[m],p=x(m),u=[];return n!==void 0&&u.push(d(o,{dimColor:!0,children:[" ",g(n)]},"duration")),t!==void 0&&m!=="running"&&u.push(d(o,{color:t===0?"green":"red",children:[" ","exit"," ",t]},"exit")),d(l,{borderColor:h,borderStyle:"round",flexDirection:"column",paddingX:1,children:[d(l,{children:[e(o,{color:h,children:p}),e(o,{children:" "}),e(l,{flexGrow:1,flexShrink:1,minWidth:0,children:e(o,{bold:!0,wrap:"truncate-end",children:r})}),i===void 0?void 0:d(o,{dimColor:!0,children:[" ","@",i]}),u.length===0?void 0:e(l,{flexShrink:0,children:u})]}),s===void 0?void 0:e(l,{flexDirection:"column",marginTop:1,children:typeof s=="string"?e(o,{children:v(s,c)}):s})]})}export{w as CommandBlock,w as default};

package/dist/command-palette.d.ts

@@ -0,0 +1,73 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type CommandEntry = {
+  /**
+   * Optional description rendered under the label.
+   */
+  readonly description?: string;
+  /**
+   * Optional hotkey rendered on the right.
+   */
+  readonly hotkey?: string;
+  /**
+   * Optional icon rendered before the label.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * Stable identifier returned by `onSelect`.
+   */
+  readonly id: string;
+  /**
+   * Optional keywords to boost matching (not displayed).
+   */
+  readonly keywords?: ReadonlyArray<string>;
+  /**
+   * Label shown in the list (and used as the primary match target).
+   */
+  readonly label: string;
+};
+type Props = {
+  /**
+   * Accent color for the border and focused row.
+   * @default "cyan"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus the palette on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Available commands to search.
+   */
+  readonly commands: ReadonlyArray<CommandEntry>;
+  /**
+   * Empty-state text when nothing matches.
+   * @default "No results"
+   */
+  readonly emptyText?: string;
+  /**
+   * Max rows rendered in the list.
+   * @default 8
+   */
+  readonly limit?: number;
+  /**
+   * Called when the user presses Escape.
+   */
+  readonly onCancel?: () => void;
+  /**
+   * Called when the user picks a command with Enter.
+   */
+  readonly onSelect: (id: string, query: string) => void;
+  /**
+   * Placeholder inside the search field.
+   * @default "Type a command or search..."
+   */
+  readonly placeholder?: string;
+};
+/**
+ * Ctrl-P style fuzzy command finder. Features a search input, ranked results,
+ * keyboard navigation, and Esc to cancel.
+ */
+declare function CommandPalette({ accentColor, autoFocus, commands, emptyText, limit, onCancel, onSelect, placeholder }: Props): ReactElement;
+export { CommandEntry, CommandPalette, type Props as CommandPaletteProps, Props, CommandPalette as default };

package/dist/command-palette.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as n}from"react/jsx-runtime";import d from"@visulima/tui/components/box";import t from"@visulima/tui/components/text";import M from"@visulima/tui/hooks/use-focus";import S from"@visulima/tui/hooks/use-input";import{isInsertableInput as T}from"@visulima/tui/input";import{useState as y,useRef as D,useMemo as F,useEffect as A,useCallback as L}from"react";const j=(m,f)=>{if(m.length===0)return 1;const p=[f.label,f.description??"",...f.keywords??[]].map(i=>i.toLowerCase()).filter(i=>i.length>0),h=m.toLowerCase();let s=0;for(const i of p){if(i.includes(h)){const u=i.indexOf(h);s=Math.max(s,100-u);continue}let x=0,g=0;for(const u of h){const c=i.indexOf(u,x);if(c===-1){g=0;break}g+=1,x=c+1}g===h.length&&(s=Math.max(s,20))}return s};function P({accentColor:m="cyan",autoFocus:f=!0,commands:p,emptyText:h="No results",limit:s=8,onCancel:i,onSelect:x,placeholder:g="Type a command or search..."}){const{isFocused:u}=M({autoFocus:f}),[c,k]=y(""),[w,C]=y(0),b=D(w);b.current=w;const l=F(()=>{const e=p.map(r=>({command:r,score:j(c,r)})).filter(({score:r})=>r>0);return e.sort((r,o)=>o.score-r.score),e.slice(0,s).map(({command:r})=>r)},[p,c,s]);return A(()=>{const e=Math.max(0,l.length-1);b.current>e&&(b.current=e,C(e))},[l]),S(L((e,r)=>{if(u){if(r.escape){i?.();return}if(r.downArrow){if(l.length===0)return;C(o=>Math.min(l.length-1,o+1));return}if(r.upArrow){C(o=>Math.max(0,o-1));return}if(r.return){const o=l[b.current];o&&x(o.id,c);return}if(r.backspace||r.delete){k(o=>o.slice(0,-1)),C(0);return}T(e,r)&&(k(o=>o+e),C(0))}},[u,l,c,x,i]),{isActive:u}),a(d,{borderColor:m,borderStyle:"round",flexDirection:"column",paddingX:1,children:[a(d,{children:[n(t,{color:m,children:"❯"}),a(t,{children:[" ",c.length===0?n(t,{dimColor:!0,children:g}):c]}),n(t,{inverse:!0,children:" "})]}),n(d,{marginTop:1,children:a(t,{dimColor:!0,children:[l.length," of ",p.length]})}),n(d,{flexDirection:"column",marginTop:1,children:l.length===0?n(t,{dimColor:!0,children:h}):l.map((e,r)=>{const o=r===w,v=o?m:void 0;return a(d,{flexDirection:"column",children:[a(d,{children:[n(t,{color:v,children:o?"▸ ":"  "}),e.icon===void 0?void 0:a(t,{color:v,children:[e.icon," "]}),n(d,{flexGrow:1,flexShrink:1,minWidth:0,children:n(t,{bold:o,color:v,wrap:"truncate-end",children:e.label})}),e.hotkey===void 0?void 0:n(d,{flexShrink:0,children:a(t,{dimColor:!0,children:[" ",e.hotkey]})})]}),e.description===void 0?void 0:n(d,{marginLeft:2,children:n(t,{dimColor:!0,wrap:"truncate-end",children:e.description})})]},e.id)})})]})}export{P as CommandPalette,P as default};

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode, ReactElement } from 'react';
+type ConfirmTone = "danger" | "info" | "warning";
+type Props = {
+  /**
+   * Auto-focus the dialog on mount. Set `false` if a parent already owns
+   * focus and routes input here.
+   * @default true
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Label for the cancel button.
+   * @default "Cancel"
+   */
+  readonly cancelLabel?: string;
+  /**
+   * Body content (rendered between title and buttons).
+   */
+  readonly children?: ReactNode;
+  /**
+   * Label for the confirm button.
+   * @default "Confirm"
+   */
+  readonly confirmLabel?: string;
+  /**
+   * Default button when opening the dialog.
+   * @default "confirm"
+   */
+  readonly defaultFocus?: "cancel" | "confirm";
+  /**
+   * Disable input.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Fired when the user declines.
+   */
+  readonly onCancel: () => void;
+  /**
+   * Fired when the user confirms.
+   */
+  readonly onConfirm: () => void;
+  /**
+   * Heading rendered at the top of the dialog.
+   */
+  readonly title?: string;
+  /**
+   * Controls the border color.
+   * @default "info"
+   */
+  readonly tone?: ConfirmTone;
+  /**
+   * Dialog width.
+   */
+  readonly width?: number;
+};
+/**
+ * Full-width modal-style confirm/cancel prompt. Unlike `ConfirmInput`, this
+ * renders a visible two-button UI: ← / → to toggle focus, Enter to activate,
+ * y/n as shortcuts, Esc to cancel.
+ * @returns A bordered `ReactElement` with optional title, body, and two
+ * buttons (cancel / confirm).
+ */
+declare function ConfirmDialog({ autoFocus, cancelLabel, children, confirmLabel, defaultFocus, isDisabled, onCancel, onConfirm, title, tone, width }: Props): ReactElement;
+export { ConfirmDialog, type Props as ConfirmDialogProps, ConfirmTone, Props, ConfirmDialog as default };

package/dist/confirm-dialog.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import s from"@visulima/tui/components/text";import x from"@visulima/tui/hooks/use-focus";import y from"@visulima/tui/hooks/use-input";import{useState as D,useCallback as A}from"react";const j={danger:"red",info:"blue",warning:"yellow"},p=({color:l,isFocused:r,label:i})=>o(n,{backgroundColor:r?l:void 0,borderColor:r?l:void 0,borderStyle:"round",paddingX:1,children:o(s,{bold:r,color:r?"black":void 0,children:i})});function Y({autoFocus:l=!0,cancelLabel:r="Cancel",children:i,confirmLabel:h="Confirm",defaultFocus:g="confirm",isDisabled:u=!1,onCancel:a,onConfirm:f,title:m,tone:v="info",width:C}){const[e,F]=D(g),c=j[v],{isFocused:w}=x({autoFocus:l,isActive:!u});return y(A((t,d)=>{if(d.leftArrow||d.rightArrow||t==="h"||t==="l"){F(e==="confirm"?"cancel":"confirm");return}if(d.return){e==="confirm"?f():a();return}if(d.escape||t==="n"){a();return}t==="y"&&f()},[e,f,a]),{isActive:!u&&w}),b(n,{borderColor:c,borderStyle:"round",flexDirection:"column",paddingX:1,paddingY:1,width:C,children:[m===void 0?void 0:o(n,{marginBottom:1,children:o(s,{bold:!0,color:c,children:m})}),i===void 0?void 0:o(n,{flexDirection:"column",marginBottom:1,children:typeof i=="string"?o(s,{children:i}):i}),b(n,{gap:2,justifyContent:"flex-end",children:[o(p,{color:c,isFocused:e==="cancel",label:r}),o(p,{color:c,isFocused:e==="confirm",label:h})]})]})}export{Y as ConfirmDialog,Y as default};

package/dist/confirm-input.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+   * The default action when pressing Enter without typing Y or N.
+   * @default "confirm"
+   */
+  readonly defaultChoice?: "cancel" | "confirm";
+  /**
+   * Whether the input is disabled.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called when the user cancels (presses N).
+   */
+  readonly onCancel: () => void;
+  /**
+   * Called when the user confirms (presses Y).
+   */
+  readonly onConfirm: () => void;
+  /**
+   * Whether pressing Enter submits the default choice.
+   * @default true
+   */
+  readonly submitOnEnter?: boolean;
+};
+/**
+ * Renders a Y/N confirmation prompt. Shows "Y/n" when default is confirm,
+ * or "y/N" when default is cancel.
+ */
+declare function ConfirmInput({ defaultChoice, isDisabled, onCancel, onConfirm, submitOnEnter }: Props): ReactElement;
+export { ConfirmInput, type Props as ConfirmInputProps, Props, ConfirmInput as default };