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

package/dist/components/confirm-dialog.d.ts

@@ -0,0 +1,75 @@
+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/components/confirm-dialog.js

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

package/dist/components/confirm-input.d.ts

@@ -0,0 +1,38 @@
+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 };

package/dist/components/confirm-input.js

@@ -0,0 +1 @@
+var m=Object.defineProperty;var t=(r,e)=>m(r,"name",{value:e,configurable:!0});import{jsx as l,jsxs as p}from"react/jsx-runtime";import{useRef as f,useCallback as C}from"react";import d from"../ink/hooks/use-input.js";import{Box as b}from"./box.js";import{Text as x}from"./text.js";var v=Object.defineProperty,y=t((r,e)=>v(r,"name",{value:e,configurable:!0}),"i");function h({defaultChoice:r="confirm",isDisabled:e=!1,onCancel:i,onConfirm:c,submitOnEnter:u=!0}){const n=f(c);n.current=c;const o=f(i);return o.current=i,d(C((a,s)=>{if(a.toLowerCase()==="y"){n.current();return}if(a.toLowerCase()==="n"){o.current();return}s.return&&u&&(r==="confirm"?n.current():o.current())},[u,r]),{isActive:!e}),l(b,{children:p(x,{dimColor:e,children:[r==="confirm"?"Y":"y","/",r==="cancel"?"N":"n"]})})}t(h,"s");y(h,"ConfirmInput");export{h as ConfirmInput,h as default};

package/dist/components/console-overlay.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { ConsoleLevel } from "../ink/hooks/use-console-capture.js";
+type ConsoleOverlayDock = "bottom" | "top";
+type Props = {
+  /**
+  * Dock position within the parent container.
+  * @default "bottom"
+  */
+  readonly dock?: ConsoleOverlayDock;
+  /**
+  * Which console levels to capture.
+  * @default ["log", "info", "warn", "error", "debug"]
+  */
+  readonly filter?: ReadonlyArray<ConsoleLevel>;
+  /**
+  * Visible height in rows.
+  * @default 8
+  */
+  readonly height?: number;
+  /**
+  * Maximum entries to keep in the buffer.
+  * @default 200
+  */
+  readonly maxEntries?: number;
+  /**
+  * Show the log level label.
+  * @default true
+  */
+  readonly showLevel?: boolean;
+  /**
+  * Show timestamps on each entry.
+  * @default true
+  */
+  readonly showTimestamp?: boolean;
+};
+/**
+* A dockable console overlay that captures and displays console output.
+*
+* ```tsx
+* &lt;Box flexDirection="column" height="100%">
+*     &lt;Box flexGrow={1}>{mainContent}&lt;/Box>
+*     &lt;ConsoleOverlay dock="bottom" height={6} />
+* &lt;/Box>
+* ```
+*/
+declare function ConsoleOverlay({
+  dock,
+  filter,
+  height,
+  maxEntries,
+  showLevel,
+  showTimestamp
+}: Props): ReactElement;
+export { ConsoleOverlay, ConsoleOverlayDock, type Props as ConsoleOverlayProps, Props, ConsoleOverlay as default };

package/dist/components/console-overlay.js

@@ -0,0 +1 @@
+var f=Object.defineProperty;var a=(e,r)=>f(e,"name",{value:r,configurable:!0});import{jsx as m,jsxs as s}from"react/jsx-runtime";import{useMemo as h}from"react";import v from"../ink/hooks/use-console-capture.js";import{Box as p}from"./box.js";import{Text as l}from"./text.js";var b=Object.defineProperty,u=a((e,r)=>b(e,"name",{value:r,configurable:!0}),"a");const w={debug:"gray",error:"red",info:"blue",log:"white",warn:"yellow"},x={debug:"DBG",error:"ERR",info:"INF",log:"LOG",warn:"WRN"},y=u(e=>{const r=new Date(e),t=String(r.getHours()).padStart(2,"0"),i=String(r.getMinutes()).padStart(2,"0"),n=String(r.getSeconds()).padStart(2,"0");return`${t}:${i}:${n}`},"formatTimestamp");function C({dock:e="bottom",filter:r,height:t=8,maxEntries:i=200,showLevel:n=!0,showTimestamp:g=!0}){const{entries:d}=v({filter:r,maxEntries:i}),c=h(()=>d.slice(-t),[d,t]);return m(p,{borderBottom:e==="top",borderBottomColor:"gray",borderTop:e==="bottom",borderTopColor:"gray",flexDirection:"column",height:t+1,children:c.length===0?m(l,{dimColor:!0,children:"Console output will appear here..."}):c.map(o=>s(p,{children:[g?s(l,{dimColor:!0,children:["[",y(o.timestamp),"]"," "]}):void 0,n?s(l,{color:w[o.level],children:[x[o.level]," "]}):void 0,m(l,{color:o.level==="error"?"red":o.level==="warn"?"yellow":void 0,children:o.message})]},o.id))})}a(C,"c");u(C,"ConsoleOverlay");export{C as ConsoleOverlay,C as default};

package/dist/components/content-switcher.d.ts

@@ -0,0 +1,57 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ContentSwitcherOption = {
+  readonly content: ReactNode;
+  readonly icon?: ReactNode;
+  readonly id: string;
+  readonly label: string;
+};
+type Props = {
+  /**
+  * Accent color for the selected segment.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the switcher on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initial selected id (uncontrolled).
+  */
+  readonly defaultValue?: string;
+  /**
+  * Disable input.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Called when the selection changes.
+  */
+  readonly onChange?: (id: string) => void;
+  /**
+  * Segments to toggle between.
+  */
+  readonly options: ReadonlyArray<ContentSwitcherOption>;
+  /**
+  * Controlled selected id.
+  */
+  readonly value?: string;
+};
+/**
+* Segmented control that flips between mutually exclusive content. More
+* compact than `Tabs`: the selected segment is highlighted as a pill, and
+* only the active segment's content is rendered.
+* @returns A `ReactElement` with a segmented header row and the active
+* panel's content beneath it.
+*/
+declare function ContentSwitcher({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  isDisabled,
+  onChange,
+  options,
+  value
+}: Props): ReactElement;
+export { ContentSwitcher, ContentSwitcherOption, type Props as ContentSwitcherProps, Props, ContentSwitcher as default };

package/dist/components/content-switcher.js

@@ -0,0 +1 @@
+var F=Object.defineProperty;var f=(i,n)=>F(i,"name",{value:n,configurable:!0});import{jsxs as h,jsx as g,Fragment as M}from"react/jsx-runtime";import{useState as j,useMemo as k,useCallback as b}from"react";import D from"../ink/hooks/use-focus.js";import S from"../ink/hooks/use-input.js";import{Box as v}from"./box.js";import{Text as y}from"./text.js";var I=Object.defineProperty,T=f((i,n)=>I(i,"name",{value:n,configurable:!0}),"g");function B({accentColor:i="blue",autoFocus:n=!1,defaultValue:C,isDisabled:l=!1,onChange:x,options:e,value:c}){const{isFocused:d}=D({autoFocus:n,isActive:!l}),w=C??e[0]?.id,[s,A]=j(w),u=c??s,t=k(()=>{if(u===void 0)return 0;const o=e.findIndex(r=>r.id===u);return Math.max(o,0)},[e,u]),m=b(o=>{const r=e[o];if(!r)return;const a=c??s;r.id!==a&&(c===void 0&&A(r.id),x?.(r.id))},[e,c,s,x]);S(b((o,r)=>{d&&(r.leftArrow||o==="h"?m(Math.max(0,t-1)):(r.rightArrow||o==="l")&&m(Math.min(e.length-1,t+1)))},[d,t,e.length,m]),{isActive:!l&&d});const p=e[t];return h(v,{flexDirection:"column",children:[g(v,{children:e.map((o,r)=>{const a=r===t;return h(y,{backgroundColor:a?i:void 0,color:a?"black":void 0,dimColor:l&&!a,children:[" ",o.icon===void 0?void 0:h(M,{children:[o.icon," "]}),o.label," "]},o.id)})}),p===void 0?void 0:g(v,{flexDirection:"column",marginTop:1,children:p.content})]})}f(B,"C");T(B,"ContentSwitcher");export{B as ContentSwitcher,B as default};

package/dist/components/controlled-scroll-view.d.ts

@@ -0,0 +1,61 @@
+import React, { ReactNode, Ref } from 'react';
+import { BoxProps as Props } from "./box.js";
+import 'type-fest';
+import "../packem_shared/dom.d-C1IxuLJ9.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import "../packem_shared/styles.d-cMo36xQz.js";
+interface ControlledScrollViewProps extends Props {
+  children?: ReactNode;
+  debug?: boolean;
+  onContentHeightChange?: (height: number, previousHeight: number) => void;
+  onItemHeightChange?: (index: number, height: number, previousHeight: number) => void;
+  onViewportSizeChange?: (size: {
+    height: number;
+    width: number;
+  }, previousSize: {
+    height: number;
+    width: number;
+  }) => void;
+  /**
+  * Number of extra items to render above/below the viewport when virtualized.
+  * @default 3
+  */
+  overscan?: number;
+  scrollOffset: number;
+  /**
+  * Only render items visible in the viewport plus overscan.
+  * Items must be measured first (first render always renders all items).
+  * @default false
+  */
+  virtualize?: boolean;
+}
+interface ControlledScrollViewRef {
+  getBottomOffset: () => number;
+  getContentHeight: () => number;
+  getItemHeight: (index: number) => number;
+  getItemPosition: (index: number) => {
+    height: number;
+    top: number;
+  } | null;
+  getViewportHeight: () => number;
+  remeasure: () => void;
+  remeasureItem: (index: number) => void;
+}
+declare const ControlledScrollView: ({
+  children,
+  debug,
+  onContentHeightChange,
+  onItemHeightChange,
+  onViewportSizeChange,
+  overscan,
+  ref,
+  scrollOffset,
+  virtualize,
+  ...boxProps
+}: ControlledScrollViewProps & {
+  ref?: Ref<ControlledScrollViewRef>;
+}) => React.JSX.Element;
+export { ControlledScrollView, type ControlledScrollViewProps, type ControlledScrollViewRef };

package/dist/components/controlled-scroll-view.js

@@ -0,0 +1 @@
+import{C as r}from"../packem_shared/controlled-scroll-view-CcUS50jx.js";export{r as ControlledScrollView};

package/dist/components/cursor.d.ts

@@ -0,0 +1,62 @@
+import React, { RefObject } from 'react';
+import { C as CursorShape } from "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import { D as DOMElement } from "../packem_shared/dom.d-C1IxuLJ9.js";
+import 'yoga-layout';
+import '@visulima/colorize';
+import 'cli-boxes';
+import "../packem_shared/styles.d-cMo36xQz.js";
+import 'type-fest';
+type Props = {
+  /**
+  * Optional reference to anchor cursor coordinates to a different element.
+  * If omitted, `<Cursor>` uses the parent container as anchor.
+  * If `anchorRef` is set but currently unresolved, Ink hides the cursor for that frame.
+  * If multiple `<Cursor>` components are rendered in one frame, the last rendered one controls the terminal cursor position.
+  */
+  readonly anchorRef?: RefObject<DOMElement | null>;
+  /**
+  * Optional cursor shape (DECSCUSR). The shape is restored to the terminal
+  * default on unmount, SIGINT, and unhandled React tree throws, so the
+  * parent shell never inherits a leaked shape.
+  *
+  * Steady variants are non-blinking; `blinking-*` variants opt into blink.
+  */
+  readonly shape?: CursorShape;
+  /**
+  * Horizontal offset from anchor content origin.
+  */
+  readonly x?: number;
+  /**
+  * Vertical offset from anchor content origin.
+  */
+  readonly y?: number;
+};
+/**
+* Declaratively position the terminal cursor.
+* `&lt;Cursor>` must not be rendered inside `&lt;Text>`.
+*
+* **Inline mode** (no props): place `&lt;Cursor />` after a `&lt;Text>` node and the
+* cursor appears where that text ended — even when text wraps across lines.
+*
+* **Anchor mode**: pass `anchorRef` and/or `x`/`y` to position relative to
+* another element's content origin.
+* @example Inline mode — cursor follows text naturally
+* ```jsx
+* <Box>
+*     <Text>{prompt + value}</Text>
+*     <Cursor />
+* </Box>
+* ```
+* @example Anchor mode — offset from a referenced element
+* ```jsx
+* <Box ref={ref} />
+* <Cursor anchorRef={ref} x={5} />
+* ```
+*/
+declare function Cursor({
+  anchorRef,
+  shape,
+  x,
+  y
+}: Props): React.JSX.Element;
+export { Cursor, type Props as CursorProps, Props, Cursor as default };

package/dist/components/cursor.js

@@ -0,0 +1 @@
+var u=Object.defineProperty;var n=(e,r)=>u(e,"name",{value:r,configurable:!0});import{jsx as c}from"react/jsx-runtime";import{useMemo as f}from"react";var p=Object.defineProperty,m=n((e,r)=>p(e,"name",{value:r,configurable:!0}),"s");function l({anchorRef:e,shape:r,x:o=0,y:a=0}){const i=e??void 0,s=i===void 0&&o===0&&a===0,t=f(()=>({anchorRef:i,inline:s,shape:r,x:o,y:a}),[i,s,r,o,a]);return c("ink-cursor",{internal_cursor:t})}n(l,"u");m(l,"Cursor");export{l as Cursor,l as default};

package/dist/components/date-picker.d.ts

@@ -0,0 +1,65 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color used by the inner calendar when open.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the picker on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initial selected date when uncontrolled.
+  */
+  readonly defaultValue?: Date;
+  /**
+  * Override the way the selected date is rendered in the input row.
+  */
+  readonly formatValue?: (date: Date) => string;
+  /**
+  * Disable the picker.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Upper bound for selectable dates.
+  */
+  readonly maxDate?: Date;
+  /**
+  * Lower bound for selectable dates.
+  */
+  readonly minDate?: Date;
+  /**
+  * Fired when the user commits a date with Enter.
+  */
+  readonly onChange?: (date: Date) => void;
+  /**
+  * Placeholder rendered when no date is selected.
+  * @default "Pick a date"
+  */
+  readonly placeholder?: string;
+  /**
+  * Controlled selected date.
+  */
+  readonly value?: Date;
+};
+/**
+* Compact date input. Shows the currently-selected date; Enter / Space opens
+* the inline `Calendar` for navigation. Enter inside the calendar commits the
+* date and closes the picker.
+*/
+declare function DatePicker({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  formatValue,
+  isDisabled,
+  maxDate,
+  minDate,
+  onChange,
+  placeholder,
+  value
+}: Props): ReactElement;
+export { DatePicker, type Props as DatePickerProps, Props, DatePicker as default };

package/dist/components/date-picker.js

@@ -0,0 +1 @@
+var $=Object.defineProperty;var v=(e,r)=>$(e,"name",{value:r,configurable:!0});import{jsxs as b,jsx as t}from"react/jsx-runtime";import{useState as x,useCallback as h}from"react";import j from"../ink/hooks/use-focus.js";import C from"../ink/hooks/use-input.js";import{Box as l}from"./box.js";import{Calendar as V}from"./calendar.js";import{Text as n}from"./text.js";var B=Object.defineProperty,D=v((e,r)=>B(e,"name",{value:r,configurable:!0}),"y");const T=D(e=>{const r=e.getFullYear(),c=String(e.getMonth()+1).padStart(2,"0"),d=String(e.getDate()).padStart(2,"0");return`${r}-${c}-${d}`},"defaultFormat");function E({accentColor:e="blue",autoFocus:r=!1,defaultValue:c,formatValue:d=T,isDisabled:u=!1,maxDate:S,minDate:F,onChange:g,placeholder:k="Pick a date",value:s}){const{isFocused:o}=j({autoFocus:r,isActive:!u}),[a,m]=x(!1),[y,A]=x(c),f=s??y;C(h((i,p)=>{!o||a||(p.return||i===" ")&&m(!0)},[o,a]),{isActive:!u&&o&&!a}),C(h((i,p)=>{p.escape&&m(!1)},[]),{isActive:!u&&o&&a});const P=h(i=>{s===void 0&&A(i),m(!1),g?.(i)},[s,g]);return b(l,{flexDirection:"column",children:[b(l,{borderColor:o?e:void 0,borderStyle:"round",paddingX:1,children:[t(n,{color:e,children:"📅 "}),f===void 0?t(n,{dimColor:!0,children:k}):t(n,{bold:!0,children:d(f)}),o&&!a?t(l,{marginLeft:1,children:t(n,{dimColor:!0,children:"(Enter to open)"})}):void 0]}),a?t(l,{marginTop:1,children:t(V,{accentColor:e,autoFocus:!0,defaultValue:f,maxDate:S,minDate:F,onSubmit:P})}):void 0]})}v(E,"S");D(E,"DatePicker");export{E as DatePicker,E as default};

package/dist/components/definition-list.d.ts

@@ -0,0 +1,44 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type DefinitionItem = {
+  readonly description: ReactNode;
+  readonly key?: string;
+  readonly term: ReactNode;
+};
+type Props = {
+  /**
+  * Spacing between term and description columns.
+  * @default 2
+  */
+  readonly columnGap?: number;
+  /**
+  * Entries to render.
+  */
+  readonly items: ReadonlyArray<DefinitionItem>;
+  /**
+  * Inline items display on the same row; stacked items display with the term above the description.
+  * @default "inline"
+  */
+  readonly layout?: "inline" | "stacked";
+  /**
+  * Color applied to the term.
+  * @default "cyan"
+  */
+  readonly termColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Minimum width used to align inline terms.
+  */
+  readonly termWidth?: number;
+};
+/**
+* Key/value style definition list. Equivalent to the HTML `&lt;dl>` element.
+*/
+declare function DefinitionList({
+  columnGap,
+  items,
+  layout,
+  termColor,
+  termWidth
+}: Props): ReactElement;
+export { DefinitionItem, DefinitionList, type Props as DefinitionListProps, Props, DefinitionList as default };

package/dist/components/definition-list.js

@@ -0,0 +1 @@
+var h=Object.defineProperty;var o=(l,r)=>h(l,"name",{value:r,configurable:!0});import{jsx as e,jsxs as m}from"react/jsx-runtime";import{Box as n}from"./box.js";import{Text as t}from"./text.js";var p=Object.defineProperty,s=o((l,r)=>p(l,"name",{value:r,configurable:!0}),"p");function u({columnGap:l=2,items:r,layout:a="inline",termColor:d="cyan",termWidth:f}){return a==="stacked"?e(n,{flexDirection:"column",gap:1,children:r.map((i,c)=>m(n,{flexDirection:"column",children:[e(t,{bold:!0,color:d,children:i.term}),e(t,{children:i.description})]},i.key??c))}):e(n,{flexDirection:"column",children:r.map((i,c)=>m(n,{gap:l,children:[e(n,{flexShrink:0,width:f,children:e(t,{color:d,children:i.term})}),e(n,{flexGrow:1,flexShrink:1,children:e(t,{children:i.description})})]},i.key??c))})}o(u,"c");s(u,"DefinitionList");export{u as DefinitionList,u as default};

package/dist/components/dialog.d.ts

@@ -0,0 +1,117 @@
+import { ReactNode, ReactElement } from 'react';
+import 'yoga-layout';
+import '@visulima/colorize';
+import 'cli-boxes';
+import { b as ScrollViewRef } from "../packem_shared/scroll-view.d-DtpsgHLg.js";
+import "./box.js";
+import 'type-fest';
+import "../packem_shared/dom.d-C1IxuLJ9.js";
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import "../packem_shared/styles.d-cMo36xQz.js";
+type Props = {
+  /**
+  * Background color for the dialog. Defaults to the detected terminal
+  * background color, falling back to `"black"`.
+  */
+  readonly backgroundColor?: string;
+  /**
+  * Border color.
+  * @default "cyan"
+  */
+  readonly borderColor?: string;
+  /**
+  * Border style.
+  * @default "round"
+  */
+  readonly borderStyle?: "arrow" | "bold" | "classic" | "double" | "doubleSingle" | "round" | "single" | "singleDouble";
+  /**
+  * Dialog content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Override terminal columns. Useful in renderToString or testing contexts
+  * where useWindowSize is unavailable.
+  */
+  readonly columns?: number;
+  /**
+  * Footer content rendered below the scrollable area.
+  * Useful for hints like "Press ? to close".
+  */
+  readonly footer?: ReactNode;
+  /**
+  * Maximum height as a fraction of terminal rows (0-1) or absolute rows.
+  * Values <= 1 are treated as fractions; values > 1 as absolute row counts.
+  * @default 0.8
+  */
+  readonly maxHeight?: number;
+  /**
+  * Padding inside the dialog border.
+  * @default 2
+  */
+  readonly paddingX?: number;
+  /**
+  * Vertical padding inside the dialog border.
+  * @default 1
+  */
+  readonly paddingY?: number;
+  /**
+  * Override terminal rows. Useful in renderToString or testing contexts
+  * where useWindowSize is unavailable.
+  */
+  readonly rows?: number;
+  /**
+  * Scrollbar visual style.
+  * @default "block"
+  */
+  readonly scrollbarStyle?: "arrow" | "block" | "bold" | "classic" | "dots" | "double" | "doubleSingle" | "line" | "round" | "single" | "singleDouble" | "thick";
+  /**
+  * Ref to the internal ScrollView for programmatic scrolling.
+  */
+  readonly scrollRef?: React.Ref<ScrollViewRef>;
+  /**
+  * Title rendered at the top of the dialog. If a string is provided,
+  * it is rendered as bold cyan text.
+  */
+  readonly title?: ReactNode;
+  /**
+  * Whether the dialog is visible. When `false`, nothing is rendered.
+  * @default true
+  */
+  readonly visible?: boolean;
+  /**
+  * Dialog width in columns.
+  * @default 60
+  */
+  readonly width?: number;
+};
+/**
+* A centered overlay dialog with automatic scrolling and scrollbar when
+* content exceeds the available terminal height.
+*
+* Uses the terminal's detected background color by default so the
+* dialog blends with the user's theme.
+*
+* ```tsx
+* &lt;Dialog title="Help" footer={&lt;Text dimColor>Press Esc to close&lt;/Text>}>
+*   &lt;Text>Dialog content here&lt;/Text>
+* &lt;/Dialog>
+* ```
+*/
+declare const Dialog: ({
+  backgroundColor: backgroundColorProp,
+  borderColor,
+  borderStyle,
+  children,
+  columns: columnsProp,
+  footer,
+  maxHeight: maxHeightProp,
+  paddingX,
+  paddingY,
+  rows: rowsProp,
+  scrollbarStyle: scrollbarStyleProp,
+  scrollRef: externalScrollRef,
+  title,
+  visible,
+  width
+}: Props) => ReactElement | null;
+export { Dialog, type Props as DialogProps, Props, Dialog as default };

package/dist/components/dialog.js

@@ -0,0 +1 @@
+var M=Object.defineProperty;var f=(l,r)=>M(l,"name",{value:r,configurable:!0});import{jsx as o,jsxs as X}from"react/jsx-runtime";import{useRef as H}from"react";import I from"../ink/hooks/use-terminal-palette.js";import R from"../ink/hooks/use-window-size.js";import{Box as e}from"./box.js";import{Text as T}from"./text.js";import{ScrollView as V}from"../packem_shared/ScrollView-DKZ8OM-m.js";var Y=Object.defineProperty,q=f((l,r)=>Y(l,"name",{value:r,configurable:!0}),"b");const F=q(({backgroundColor:l,borderColor:r="cyan",borderStyle:g="round",children:b,columns:h,footer:d,maxHeight:n=.8,paddingX:i=2,paddingY:p=1,rows:x,scrollbarStyle:k="block",scrollRef:y,title:t,visible:C=!0,width:S=60})=>{const c=R(),{isLoading:w,palette:D}=I(),j=H(null),v=y??j;if(!C)return null;const m=h??(c.columns||80),a=x??(c.rows||24),s=l??(w?"black":D?.background??"black"),B=n<=1?Math.floor(a*n):Math.min(n,a-2),u=typeof t=="string"?o(e,{marginBottom:1,children:o(T,{bold:!0,color:r,children:t})}):t??null;return o(e,{alignItems:"center",height:a,justifyContent:"center",position:"absolute",width:m,children:X(e,{backgroundColor:s,borderBackgroundColor:s,borderColor:r,borderStyle:g,flexDirection:"column",maxHeight:B,opaque:!0,paddingY:p,width:Math.min(S,m-4),children:[u!=null&&o(e,{flexShrink:0,paddingX:i,children:u}),o(V,{flexGrow:1,flexShrink:1,paddingX:i,ref:v,scrollbar:!0,scrollbarColor:r,scrollbarStyle:k,children:b}),d!=null&&o(e,{alignItems:"center",flexDirection:"column",flexShrink:0,marginTop:1,paddingX:i,children:d})]})})},"Dialog");export{F as Dialog,F as default};