@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/scroll-bar.js

@@ -0,0 +1 @@
+import{ScrollBar as l}from"./packem_shared/ScrollBar-C9i3z3Ft.js";export{l as ScrollBar};

package/dist/scroll-list.d.ts

@@ -0,0 +1,4 @@
+export { type S as ScrollAlignment, a as ScrollList, type b as ScrollListProps, type c as ScrollListRef } from "./packem_shared/scroll-list.d-BP0UZSY4.js";
+import 'react';
+import "./packem_shared/scroll-view.d-BqKpI-F-.js";
+import '@visulima/tui/components/box';

package/dist/scroll-list.js

@@ -0,0 +1 @@
+import{ScrollList as l}from"./packem_shared/ScrollList-Djtb2vVy.js";export{l as ScrollList};

package/dist/scroll-view.d.ts

@@ -0,0 +1,3 @@
+export { S as ScrollView, type a as ScrollViewProps, type b as ScrollViewRef } from "./packem_shared/scroll-view.d-BqKpI-F-.js";
+import '@visulima/tui/components/box';
+import 'react';

package/dist/scroll-view.js

@@ -0,0 +1 @@
+import{ScrollView as e}from"./packem_shared/ScrollView-ESxpl6Hy.js";export{e as ScrollView};

package/dist/search-input.d.ts

@@ -0,0 +1,55 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the accent elements (border, icon).
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initial value.
+  */
+  readonly defaultValue?: string;
+  /**
+  * Node rendered before the input as a search affordance.
+  * @default "⌕" (telephone recorder)
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Disable the input.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Fired whenever the value changes.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Fired when the user presses Enter.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Placeholder text shown when the input is empty.
+  * @default "Search..."
+  */
+  readonly placeholder?: string;
+  /**
+  * Autocomplete suggestions.
+  */
+  readonly suggestions?: ReadonlyArray<string>;
+};
+/**
+* Search-styled text input with an icon and bordered container.
+* @returns A `ReactElement` wrapping `TextInput` with an icon column.
+*/
+declare function SearchInput({
+  accentColor,
+  defaultValue,
+  icon,
+  isDisabled,
+  onChange,
+  onSubmit,
+  placeholder,
+  suggestions
+}: Props): ReactElement;
+export { Props, SearchInput, type Props as SearchInputProps, SearchInput as default };

package/dist/search-input.js

@@ -0,0 +1 @@
+import{jsxs as u,jsx as o}from"react/jsx-runtime";import r from"@visulima/tui/components/box";import c from"@visulima/tui/components/text";import{TextInput as p}from"./text-input.js";function b({accentColor:e="blue",defaultValue:l="",icon:a="⌕",isDisabled:n=!1,onChange:t,onSubmit:i,placeholder:s="Search...",suggestions:d}){return u(r,{borderColor:e,borderStyle:"round",gap:1,paddingX:1,children:[o(c,{color:e,children:a}),o(r,{flexGrow:1,children:o(p,{defaultValue:l,isDisabled:n,onChange:t,onSubmit:i,placeholder:s,suggestions:d})})]})}export{b as SearchInput,b as default};

package/dist/select-input-indicator.d.ts

@@ -0,0 +1,32 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the indicator when selected.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Whether the parent SelectInput has focus.
+  * When `false`, the indicator is dimmed even if the item is selected.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Whether this indicator's item is currently selected.
+  * @default false
+  */
+  readonly isSelected?: boolean;
+};
+/**
+* Renders a pointer indicator next to the selected item, or a blank space otherwise.
+* When unfocused, the indicator is rendered with `dimColor` to visually distinguish
+* the active select input from inactive ones.
+*/
+declare function SelectInputIndicator({
+  accentColor,
+  isFocused,
+  isSelected
+}: Props): ReactElement;
+export { Props, SelectInputIndicator, type Props as SelectInputIndicatorProps, SelectInputIndicator as default };

package/dist/select-input-indicator.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import o from"@visulima/tui/components/text";function m({accentColor:e="blue",isFocused:t=!0,isSelected:i=!1}){return r(c,{marginRight:1,children:i?r(o,{color:e,dimColor:!t,children:"❯"}):r(o,{children:" "})})}export{m as SelectInputIndicator,m as default};

package/dist/select-input-item.d.ts

@@ -0,0 +1,41 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the label when selected.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color of the label when not selected.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Whether the parent SelectInput has focus.
+  * When `false`, the selected item is dimmed.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Whether this item is currently selected.
+  * @default false
+  */
+  readonly isSelected?: boolean;
+  /**
+  * Text label to display for this item.
+  */
+  readonly label: string;
+};
+/**
+* Renders an item label, using `accentColor` when selected and `defaultColor` otherwise.
+* When unfocused, selected items are rendered with `dimColor`.
+*/
+declare function SelectInputItem({
+  accentColor,
+  defaultColor,
+  isFocused,
+  isSelected,
+  label
+}: Props): ReactElement;
+export { Props, SelectInputItem, type Props as SelectInputItemProps, SelectInputItem as default };

package/dist/select-input-item.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import i from"@visulima/tui/components/text";function s({accentColor:o="blue",defaultColor:l,isFocused:r=!0,isSelected:e=!1,label:t}){return c(i,{color:e?o:l,dimColor:e&&!r,children:t})}export{s as SelectInputItem,s as default};

package/dist/select-input.d.ts

@@ -0,0 +1,110 @@
+import { AnsiColors } from '@visulima/colorize';
+import { FC, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { Props as Props$1 } from "./select-input-indicator.js";
+import { Props as Props$2 } from "./select-input-item.js";
+type Item<V> = {
+  /**
+  * Called automatically when this item is selected (via Enter or number key).
+  * Fires after `onSelect`. Useful for defining per-item behavior inline.
+  */
+  readonly action?: () => void;
+  readonly key?: string;
+  readonly label: string;
+  readonly value: V;
+};
+type SeparatorItem = {
+  /**
+  * Marks this entry as a non-focusable separator line.
+  */
+  readonly isSeparator: true;
+  readonly key?: string;
+  /**
+  * Custom separator text. Defaults to `"───"`.
+  */
+  readonly label?: string;
+};
+type SelectInputEntry<V> = Item<V> | SeparatorItem;
+type Props<V> = {
+  /**
+  * Color used for the selected item and indicator.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color used for unselected items.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Controlled selected index. When provided, the component becomes controlled
+  * and `initialIndex` is ignored. Update this value in the `onHighlight` callback
+  * to track selection externally. If the index points to a separator, the nearest
+  * selectable item is highlighted instead.
+  */
+  readonly index?: number;
+  /**
+  * Custom component to override the default indicator component.
+  */
+  readonly indicatorComponent?: FC<Props$1>;
+  /**
+  * Index of initially-selected item in `items` array.
+  * Ignored when `index` is provided.
+  * When omitted (`undefined`), no item is highlighted until the user presses a key.
+  * If the index points to a separator, the nearest selectable item is used.
+  */
+  readonly initialIndex?: number;
+  /**
+  * Whether the input is focused. Useful for when there are multiple
+  * inputs on the screen and you need to control which one captures input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Custom component to override the default item component.
+  */
+  readonly itemComponent?: FC<Props$2>;
+  /** @default [] */
+  readonly items?: ReadonlyArray<SelectInputEntry<V>>;
+  /**
+  * Number of visible items. Useful if the list is long and you want
+  * to limit the display with a scrolling window.
+  */
+  readonly limit?: number;
+  /**
+  * Called when the user highlights a new item via arrow keys or `j`/`k`.
+  * The second argument is the index of the highlighted item in the visible list.
+  */
+  readonly onHighlight?: (item: Item<V>, index: number) => void;
+  /**
+  * Called when the user selects an item via Enter or a number key (1-9).
+  */
+  readonly onSelect?: (item: Item<V>) => void;
+  /**
+  * Whether to reset the selection when items change.
+  * Set to `false` to preserve the current selection across item updates.
+  * @default true
+  */
+  readonly resetOnItemsChange?: boolean;
+};
+/**
+* A select input component for terminal UIs.
+*
+* Renders a list of items with an indicator showing the currently highlighted item.
+* Users can navigate with arrow keys or `j`/`k`, select with Enter, or jump to an
+* item by pressing a number key (1-9).
+*/
+declare function SelectInput<V>({
+  accentColor,
+  defaultColor,
+  index,
+  indicatorComponent,
+  initialIndex,
+  isFocused,
+  itemComponent,
+  items,
+  limit: customLimit,
+  onHighlight,
+  onSelect,
+  resetOnItemsChange
+}: Props<V>): ReactElement;
+export { Item, Props, SelectInput, SelectInputEntry, type Item as SelectInputItemType, type Props as SelectInputProps, type SeparatorItem as SelectInputSeparator, SeparatorItem, SelectInput as default };

package/dist/select-input.js

@@ -0,0 +1 @@
+import{jsx as k,jsxs as $}from"react/jsx-runtime";import{isDeepStrictEqual as ee}from"node:util";import q from"@visulima/tui/components/box";import te from"@visulima/tui/components/text";import ne from"@visulima/tui/hooks/use-input";import re from"@visulima/tui/hooks/use-window-size";import{useReducer as oe,useRef as w,useMemo as ce,useEffect as X,useCallback as H,createElement as Y}from"react";import{SelectInputIndicator as ie}from"./select-input-indicator.js";import{SelectInputItem as se}from"./select-input-item.js";const y=n=>"isSeparator"in n&&n.isSeparator,ae=[],de=/^[1-9]$/,d=-1,le="───",ue=Symbol("separator"),fe=(n,r)=>{switch(r.type){case"navigate":return{rotateIndex:r.rotateIndex,selectedIndex:r.selectedIndex};case"reset":return{rotateIndex:0,selectedIndex:r.hasInitialSelection?r.initialIndex:d};case"set":return{rotateIndex:r.selectedIndex,selectedIndex:r.selectedIndex};default:return n}},me=(n,r)=>{const{length:o}=n;if(o===0)return[];const u=(r%o+o)%o;return[...n.slice(u),...n.slice(0,u)]},S=(n,r,o,u)=>r?me(n,o).slice(0,u):n,E=(n,r,o)=>{const{length:u}=n;for(let b=0;b<u;b+=1){const C=((r+(b+1)*o)%u+u)%u;if(!y(n[C]))return C}return d},Z=(n,r)=>{if(r<0||r>=n.length)return d;const o=n[r];return o&&!y(o)?r:E(n,r-1,1)};function ve({accentColor:n="blue",defaultColor:r,index:o,indicatorComponent:u=ie,initialIndex:b,isFocused:C=!0,itemComponent:Q=se,items:t=ae,limit:N,onHighlight:f,onSelect:O,resetOnItemsChange:R=!0}){const{rows:W}=re(),z=typeof N=="number"?N:W,c=t.length>z,l=c?Math.min(z,t.length):t.length,A=l-1,G=typeof o=="number"||typeof b=="number",J=typeof o=="number"?o:b??d,D=J===d?d:Z(t,Math.min(J,A)),[F,v]=oe(fe,{rotateIndex:D>A?A-D:0,selectedIndex:D}),K=w(G),L=w(D),P=w(F);P.current=F;const j=w(O);j.current=O;const B=w(t),M=ce(()=>t.map(e=>y(e)?ue:e.value),[t]),T=w(M);K.current=G,L.current=D,X(()=>{R&&!ee(T.current,M)&&v({hasInitialSelection:K.current,initialIndex:L.current,type:"reset"}),T.current=M,B.current=t},[t,M,R]),X(()=>{if(typeof o=="number"){const e=Z(t,Math.min(o,A));v({selectedIndex:e===d?0:e,type:"set"})}},[o,t,A]);const U=H((e,i)=>{const s=S(t,c,e,l);if(i===d){const x=E(s,0,-1);if(x===d)return;v({rotateIndex:e,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(s[x],x);return}const h=(c?l:t.length)-1,a=i===0,m=a?h:i-1,p=a&&c?e+1:e,g=S(t,c,p,l),I=y(g[m])?E(g,m,-1):m;I!==d&&(v({rotateIndex:p,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(g[I],I))},[c,l,t,f]),V=H((e,i)=>{const s=S(t,c,e,l);if(i===d){const x=E(s,s.length-1,1);if(x===d)return;v({rotateIndex:e,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(s[x],x);return}const h=(c?l:t.length)-1,a=i===h,m=a?0:i+1,p=a&&c?e-1:e,g=S(t,c,p,l),I=y(g[m])?E(g,m,1):m;I!==d&&(v({rotateIndex:p,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(g[I],I))},[c,l,t,f]);ne(H((e,i)=>{const{rotateIndex:s,selectedIndex:h}=P.current;if((e==="k"||i.upArrow)&&U(s,h),(e==="j"||i.downArrow)&&V(s,h),de.test(e)){const a=Number.parseInt(e,10)-1,m=S(t,c,s,l);if(a>=0&&a<m.length){const p=m[a];p&&!y(p)&&(j.current?.(p),p.action?.())}}if(i.return&&h!==d){const a=S(t,c,s,l)[h];a&&!y(a)&&(j.current?.(a),a.action?.())}},[U,V,c,l,t]),{isActive:C});const _=S(t,c,F.rotateIndex,l);return k(q,{flexDirection:"column",children:_.map((e,i)=>{if(y(e))return k(q,{children:k(te,{dimColor:!0,children:e.label??le})},e.key??`separator-${String(i)}`);const s=i===F.selectedIndex;return $(q,{children:[Y(u,{accentColor:n,isFocused:C,isSelected:s}),Y(Q,{...e,accentColor:n,defaultColor:r,isFocused:C,isSelected:s})]},e.key??String(e.value))})})}export{ve as SelectInput,ve as default};

package/dist/shimmer-text.d.ts

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Width of the highlighted band in characters.
+  * @default 3
+  */
+  readonly bandWidth?: number;
+  /**
+  * Base color of the non-highlighted text.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Highlight color of the sweeping band.
+  * @default "white"
+  */
+  readonly highlightColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Milliseconds between frames of the shimmer.
+  * @default 60
+  */
+  readonly interval?: number;
+  /**
+  * Text to render with a shimmer sweep.
+  */
+  readonly text: string;
+};
+/**
+* Text with an animated highlight band that sweeps across the characters.
+* Perfect for "generating…" states.
+* @param props Component props.
+* @param props.bandWidth Number of characters in the bright band.
+* @param props.color Color applied to characters outside the band.
+* @param props.highlightColor Color applied to characters inside the band.
+* @param props.interval Milliseconds between frames.
+* @param props.text Content to shimmer.
+* @returns A single `Text` element composed of per-character `Text` children.
+*/
+declare function ShimmerText({
+  bandWidth,
+  color,
+  highlightColor,
+  interval,
+  text
+}: Props): ReactElement;
+export { Props, ShimmerText, type Props as ShimmerTextProps, ShimmerText as default };

package/dist/shimmer-text.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import n from"@visulima/tui/components/text";import g from"@visulima/tui/hooks/use-animation";import{useMemo as s}from"react";function w({bandWidth:m=3,color:r,highlightColor:d="white",interval:a=60,text:e}){const{frame:p}=g({interval:a}),t=s(()=>[...e],[e]),l=t.length,u=l+m,x=l===0?0:p%u,b=s(()=>t.map((o,h)=>i(n,{color:r,dimColor:r===void 0,children:o},h)),[t,r]);if(l===0)return i(n,{color:r,children:e});const c=[];for(const[o,h]of t.entries()){const f=x-o;if(!(f>=0&&f<m)){c.push(b[o]);continue}c.push(i(n,{bold:!0,color:d,children:h},`band-${o}`))}return i(n,{children:c})}export{w as ShimmerText,w as default};

package/dist/sidebar.d.ts

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Main content, filling the remaining width.
+  */
+  readonly children: ReactNode;
+  /**
+  * Draw a border/rule between the sidebar and the content.
+  * @default true
+  */
+  readonly divider?: boolean;
+  /**
+  * Color of the divider rule.
+  * @default "gray"
+  */
+  readonly dividerColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Which side the sidebar sits on.
+  * @default "left"
+  */
+  readonly side?: "left" | "right";
+  /**
+  * Sidebar content.
+  */
+  readonly sidebar: ReactNode;
+  /**
+  * Fixed sidebar width in cells.
+  * @default 24
+  */
+  readonly width?: number;
+};
+/**
+* A two-pane layout: a fixed-width sidebar and a flexible content area, with an
+* optional vertical divider rule between them. The sidebar can sit on either
+* side.
+*/
+declare function Sidebar({
+  children,
+  divider,
+  dividerColor,
+  side,
+  sidebar,
+  width
+}: Props): ReactElement;
+export { Props, Sidebar, type Props as SidebarProps, Sidebar as default };

package/dist/sidebar.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import e from"@visulima/tui/components/box";function c({children:l,divider:i=!0,dividerColor:f="gray",side:r="left",sidebar:n,width:s=24}){const d=t(e,{borderBottom:!1,borderColor:f,borderLeft:i&&r==="right",borderRight:i&&r==="left",borderStyle:"single",borderTop:!1,flexShrink:0,paddingX:1,width:s,children:n}),o=t(e,{flexGrow:1,paddingX:1,children:l});return a(e,{flexDirection:"row",children:[r==="left"?d:o,r==="left"?o:d]})}export{c as Sidebar,c as default};

package/dist/slider.d.ts

@@ -0,0 +1,103 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the filled portion of the track and thumb.
+  * @default "green"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color for the empty portion of the track.
+  * @default "gray"
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initial value when uncontrolled.
+  * @default 0
+  */
+  readonly defaultValue?: number;
+  /**
+  * Character used for the empty portion of the track.
+  * @default "░"
+  */
+  readonly emptyCharacter?: string;
+  /**
+  * Character used for the filled portion of the track.
+  * @default "█"
+  */
+  readonly filledCharacter?: string;
+  /**
+  * When true, all input is ignored and the slider is dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * When true, the component responds to keyboard input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum value.
+  * @default 100
+  */
+  readonly max?: number;
+  /**
+  * Minimum value.
+  * @default 0
+  */
+  readonly min?: number;
+  /**
+  * Fires whenever the value changes.
+  */
+  readonly onChange?: (value: number) => void;
+  /**
+  * Layout direction of the slider.
+  * @default "horizontal"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * Increment size for arrow key presses.
+  * @default 1
+  */
+  readonly step?: number;
+  /**
+  * Character used to indicate the current position.
+  * @default "●"
+  */
+  readonly thumbCharacter?: string;
+  /**
+  * Controlled value. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: number;
+  /**
+  * Width of the slider track in columns (horizontal) or rows (vertical).
+  * @default 20
+  */
+  readonly width?: number;
+};
+/**
+* A keyboard-driven slider / range input.
+*
+* ```tsx
+* &lt;Slider defaultValue={50} min={0} max={100} onChange={setValue} />
+* ```
+*/
+declare function Slider({
+  accentColor,
+  defaultColor,
+  defaultValue,
+  emptyCharacter,
+  filledCharacter,
+  isDisabled,
+  isFocused,
+  max,
+  min,
+  onChange,
+  orientation,
+  step,
+  thumbCharacter,
+  value: controlledValue,
+  width
+}: Props): ReactElement;
+export { Props, Slider, type Props as SliderProps, Slider as default };

package/dist/slider.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as U}from"react/jsx-runtime";import A from"@visulima/tui/components/box";import C from"@visulima/tui/components/text";import X from"@visulima/tui/hooks/use-input";import{useState as Y,useRef as I,useCallback as J}from"react";const D=(u,d,v)=>Math.min(v,Math.max(d,u));function $({accentColor:u="green",defaultColor:d="gray",defaultValue:v=0,emptyCharacter:y="░",filledCharacter:j="█",isDisabled:e=!1,isFocused:K=!0,max:z=100,min:F=0,onChange:N,orientation:h="horizontal",step:m=1,thumbCharacter:k="●",value:q,width:L=20}){const o=Math.min(F,z),i=Math.max(F,z),w=q!==void 0,[O,Q]=Y(D(v,o,i)),x=w?D(q,o,i):O,G=I(N);G.current=N;const s=I(x);s.current=x;const n=J(t=>{const r=D(t,o,i);w||Q(r),G.current?.(r)},[o,i,w]),b=m*10,f=i-o,S=J((t,r)=>{const M=h==="horizontal"?r.rightArrow:r.upArrow,p=h==="horizontal"?r.leftArrow:r.downArrow;if(M){n(s.current+m);return}if(p){n(s.current-m);return}if(r.pageUp){n(s.current+b);return}if(r.pageDown){n(s.current-b);return}if(r.home){n(o);return}if(r.end){n(i);return}if(t>="0"&&t<="9"){const R=Number.parseInt(t,10)/10;n(o+f*R)}},[m,b,o,i,f,h,n]);X(S,{isActive:K&&!e});const g=Math.max(1,L),V=f===0?0:(x-o)/f,l=Math.round(V*(g-1));if(h==="vertical"){const t=[];for(let r=g-1;r>=0;r--){const M=r===l,p=r<=l;t.push(a(A,{children:a(C,{color:e?void 0:p?u:d,dimColor:e,children:M?k:p?j:y})},r))}return a(A,{flexDirection:"column",children:t})}let c="";for(let t=0;t<g;t++)t===l?c+=k:t<l?c+=j:c+=y;const W=c.slice(0,l),E=c[l]??"",H=c.slice(l+1);return U(A,{children:[a(C,{color:e?void 0:u,dimColor:e,children:W}),a(C,{bold:!0,color:e?void 0:u,dimColor:e,children:E}),a(C,{color:e?void 0:d,dimColor:e,children:H})]})}export{$ as Slider,$ as default};

package/dist/sparkline.d.ts

@@ -0,0 +1,42 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color applied to the chart glyphs.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Data points to plot. Values may be any real numbers.
+  */
+  readonly data: ReadonlyArray<number>;
+  /**
+  * Render with shade glyphs (`░▒▓█`) instead of vertical bars, for a
+  * textured, monochrome-friendly look.
+  * @default false
+  */
+  readonly dither?: boolean;
+  /**
+  * Optional fixed maximum for the vertical scale.
+  * When omitted the maximum data value is used.
+  */
+  readonly max?: number;
+  /**
+  * Optional fixed minimum for the vertical scale.
+  * When omitted the minimum data value is used.
+  */
+  readonly min?: number;
+};
+/**
+* Inline bar chart using Unicode block glyphs.
+* @returns A `ReactElement` containing the glyph string, or `null` when
+* `data` is empty.
+*/
+declare function Sparkline({
+  color,
+  data,
+  dither,
+  max,
+  min
+}: Props): ReactElement | null;
+export { Props, Sparkline, type Props as SparklineProps, Sparkline as default };

package/dist/sparkline.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";import c from"@visulima/tui/components/text";import{useMemo as d}from"react";const h="▁▂▃▄▅▆▇█",I="░▒▓█",x=(m,o,r,t)=>{if(r===0)return t[0];const i=(m-o)/r,n=Math.max(0,Math.min(t.length-1,Math.floor(i*t.length)));return t[n]},N=(m,o,r)=>{let t=o??Number.POSITIVE_INFINITY,i=r??Number.NEGATIVE_INFINITY;if(o===void 0||r===void 0)for(const n of m)o===void 0&&n<t&&(t=n),r===void 0&&n>i&&(i=n);return{max:i,min:t}};function M({color:m,data:o,dither:r=!1,max:t,min:i}){const n=d(()=>{if(o.length===0)return"";const{max:e,min:a}=N(o,i,t),l=e-a,u=r?I:h;return o.map(f=>x(f,a,l,u)).join("")},[o,r,i,t]);return n.length===0?null:s(c,{color:m,children:n})}export{M as Sparkline,M as default};

package/dist/spinner.d.ts

@@ -0,0 +1,17 @@
+import { SpinnerName } from '@visulima/spinner';
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * Type of a spinner.
+  * Accepts any preset from `@visulima/spinner` (cli-spinners + custom frame sets).
+  * @default "dots"
+  */
+  readonly type?: SpinnerName;
+};
+/**
+* Spinner component that renders an animated loading indicator.
+*/
+declare function Spinner({
+  type
+}: Props): ReactElement;
+export { Props, Spinner, type Props as SpinnerProps, Spinner as default };

package/dist/spinner.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{getSpinner as e}from"@visulima/spinner";import m from"@visulima/tui/components/text";import p from"@visulima/tui/hooks/use-animation";function d({type:n="dots"}){const r=e(n)??e("dots"),t=r?.frames??[" "],{frame:o}=p({interval:r?.interval??80});return i(m,{children:t[o%t.length]})}export{d as Spinner,d as default};

package/dist/status-line.d.ts

@@ -0,0 +1,37 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Background color spanning the whole row.
+  */
+  readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered in the center. Optional.
+  */
+  readonly center?: ReactNode;
+  /**
+  * Default foreground for text rendered inside the row.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered flush-left.
+  */
+  readonly left?: ReactNode;
+  /**
+  * Content rendered flush-right.
+  */
+  readonly right?: ReactNode;
+};
+/**
+* Full-width status bar with left / center / right slots. Typically pinned to
+* the bottom of the UI.
+*/
+declare function StatusLine({
+  backgroundColor,
+  center,
+  color,
+  left,
+  right
+}: Props): ReactElement;
+export { Props, StatusLine, type Props as StatusLineProps, StatusLine as default };

package/dist/status-line.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as t}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import c from"@visulima/tui/components/text";const e=(r,i)=>{if(r!==void 0)return typeof r=="string"||typeof r=="number"?t(c,{color:i,children:r}):r};function x({backgroundColor:r,center:i,color:n,left:d,right:f}){return l(o,{backgroundColor:r,paddingX:1,width:"100%",children:[t(o,{flexGrow:1,flexShrink:1,minWidth:0,children:e(d,n)}),i===void 0?void 0:t(o,{flexGrow:0,flexShrink:0,justifyContent:"center",children:e(i,n)}),t(o,{flexGrow:1,flexShrink:1,justifyContent:"flex-end",minWidth:0,children:e(f,n)})]})}export{x as StatusLine,x as default};

package/dist/status-message.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "./packem_shared/variant-config.d-D5NnrrQK.js";
+type StatusMessageVariant = Variant;
+type Props = {
+  /**
+  * Message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Determines the icon and color of the status message.
+  */
+  readonly variant: StatusMessageVariant;
+};
+/**
+* Renders a status notification with a colored icon and message text.
+*/
+declare function StatusMessage({
+  children,
+  variant
+}: Props): ReactElement;
+export { Props, StatusMessage, type Props as StatusMessageProps, StatusMessageVariant, StatusMessage as default };

package/dist/status-message.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as o}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import r from"@visulima/tui/components/text";import{o as e}from"./packem_shared/variant-config-BJqpNo7H.js";function d({children:i,variant:t}){const{color:s,icon:n}=e[t];return a(c,{gap:1,children:[o(r,{color:s,children:n}),o(r,{children:i})]})}export{d as StatusMessage,d as default};