@visulima/tui-kit 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## @visulima/tui-kit [1.0.2](https://github.com/visulima/visulima/compare/%40visulima%2Ftui-kit%401.0.1...%40visulima%2Ftui-kit%401.0.2) (2026-08-02)
+
+
+### Dependencies
+
+* **@visulima/ansi:** upgraded to 4.1.0
+* **@visulima/colorize:** upgraded to 2.1.0
+* **@visulima/spinner:** upgraded to 1.0.1
+* **@visulima/tui:** upgraded to 3.0.0
+* **@visulima/tabular:** upgraded to 4.1.0
+
+## @visulima/tui-kit [1.0.1](https://github.com/visulima/visulima/compare/%40visulima%2Ftui-kit%401.0.0...%40visulima%2Ftui-kit%401.0.1) (2026-07-27)
+
+
+### Dependencies
+
+* **@visulima/tui:** upgraded to 2.0.1
+
 ## @visulima/tui-kit 1.0.0 (2026-07-27)
 
 

package/dist/accordion.d.ts

@@ -3,57 +3,50 @@ import { ReactNode, ReactElement } from 'react';
 import { LiteralUnion } from 'type-fest';
 type AccordionItem = {
   /**
-  * Content rendered when the item is expanded.
-  */
+   * Content rendered when the item is expanded.
+   */
   readonly content: ReactNode;
   /**
-  * Unique identifier.
-  */
+   * Unique identifier.
+   */
   readonly id: string;
   /**
-  * Header label.
-  */
+   * Header label.
+   */
   readonly title: ReactNode;
 };
 type Props = {
   /**
-  * Accent color for the focused header.
-  * @default "blue"
-  */
+   * Accent color for the focused header.
+   * @default "blue"
+   */
   readonly accentColor?: LiteralUnion<AnsiColors, string>;
   /**
-  * When true, multiple panels can be open at once.
-  * @default false
-  */
+   * When true, multiple panels can be open at once.
+   * @default false
+   */
   readonly allowMultiple?: boolean;
   /**
-  * Auto-focus the first item on mount.
-  */
+   * Auto-focus the first item on mount.
+   */
   readonly autoFocus?: boolean;
   /**
-  * Initially open item ids.
-  */
+   * Initially open item ids.
+   */
   readonly defaultExpanded?: ReadonlyArray<string>;
   /**
-  * Disable interaction.
-  */
+   * Disable interaction.
+   */
   readonly isDisabled?: boolean;
   /**
-  * List of panels.
-  */
+   * List of panels.
+   */
   readonly items: ReadonlyArray<AccordionItem>;
 };
 /**
-* Keyboard-navigable accordion. Use arrow keys to move between panels and
-* Enter / Space to toggle.
-* @returns A `ReactElement` rendering the accordion column.
-*/
-declare function Accordion({
-  accentColor,
-  allowMultiple,
-  autoFocus,
-  defaultExpanded,
-  isDisabled,
-  items
-}: Props): ReactElement;
+ * Keyboard-navigable accordion. Use arrow keys to move between panels and
+ * Enter / Space to toggle.
+ * @returns A `ReactElement` rendering the accordion column.
+ */
+declare function Accordion({ accentColor, allowMultiple, autoFocus, defaultExpanded, isDisabled, items }: Props): ReactElement;
 export { Accordion, AccordionItem, type Props as AccordionProps, Props, Accordion as default };

package/dist/alert.d.ts

@@ -3,24 +3,20 @@ import { V as Variant } from "./packem_shared/variant-config.d-D5NnrrQK.js";
 type AlertVariant = Variant;
 type Props = {
   /**
-  * Alert message content.
-  */
+   * Alert message content.
+   */
   readonly children: ReactNode;
   /**
-  * Optional heading displayed above the message.
-  */
+   * Optional heading displayed above the message.
+   */
   readonly title?: string;
   /**
-  * Determines the border color and icon.
-  */
+   * Determines the border color and icon.
+   */
   readonly variant: AlertVariant;
 };
 /**
-* Renders a bordered alert box with a variant-specific icon, optional title, and message.
-*/
-declare function Alert({
-  children,
-  title,
-  variant
-}: Props): ReactElement;
+ * Renders a bordered alert box with a variant-specific icon, optional title, and message.
+ */
+declare function Alert({ children, title, variant }: Props): ReactElement;
 export { Alert, type Props as AlertProps, AlertVariant, Props, Alert as default };

package/dist/animate-presence.d.ts

@@ -1,18 +1,16 @@
 import { ReactNode, ReactElement } from 'react';
 type Props = {
   /**
-  * Keyed children. Any child that accepts a `show: boolean` prop and calls
-  * `onExit` when its exit transition finishes (such as `<Transition />`) is
-  * orchestrated automatically. Other children render as-is.
-  */
+   * Keyed children. Any child that accepts a `show: boolean` prop and calls
+   * `onExit` when its exit transition finishes (such as `<Transition />`) is
+   * orchestrated automatically. Other children render as-is.
+   */
   readonly children: ReactNode;
 };
 /**
-* Orchestrates enter / exit animations for keyed children. Wrap a dynamic
-* list of `<Transition />` (or any component accepting `show` + `onExit`) to
-* keep outgoing children mounted until their exit animation finishes.
-*/
-declare function AnimatePresence({
-  children
-}: Props): ReactElement;
+ * Orchestrates enter / exit animations for keyed children. Wrap a dynamic
+ * list of `<Transition />` (or any component accepting `show` + `onExit`) to
+ * keep outgoing children mounted until their exit animation finishes.
+ */
+declare function AnimatePresence({ children }: Props): ReactElement;
 export { AnimatePresence, type Props as AnimatePresenceProps, Props, AnimatePresence as default };

package/dist/approval-prompt.d.ts

@@ -5,61 +5,51 @@ type ApprovalRisk = "high" | "low" | "medium";
 type ApprovalDecision = "allow-always" | "allow-once" | "deny";
 type Props = {
   /**
-  * Accent color for the highlighted option letters. Overrides the risk color.
-  */
+   * Accent color for the highlighted option letters. Overrides the risk color.
+   */
   readonly accentColor?: LiteralUnion<AnsiColors, string>;
   /**
-  * Auto-focus the prompt on mount. Set to `false` if a parent already
-  * owns focus and routes input to this component.
-  * @default true
-  */
+   * Auto-focus the prompt on mount. Set to `false` if a parent already
+   * owns focus and routes input to this component.
+   * @default true
+   */
   readonly autoFocus?: boolean;
   /**
-  * Optional body rendered between the header and the prompt line (e.g. a
-  * rendered diff or command preview).
-  */
+   * Optional body rendered between the header and the prompt line (e.g. a
+   * rendered diff or command preview).
+   */
   readonly children?: ReactNode;
   /**
-  * Accessible description of what approving will do.
-  */
+   * Accessible description of what approving will do.
+   */
   readonly description?: string;
   /**
-  * Disable input; use when a parent manages focus and input routing.
-  */
+   * Disable input; use when a parent manages focus and input routing.
+   */
   readonly isDisabled?: boolean;
   /**
-  * Resolution callback. Called once the user answers.
-  */
+   * Resolution callback. Called once the user answers.
+   */
   readonly onDecision: (decision: ApprovalDecision) => void;
   /**
-  * Params shown as a compact key=value preview.
-  */
+   * Params shown as a compact key=value preview.
+   */
   readonly params?: Readonly<Record<string, unknown>>;
   /**
-  * Severity badge; controls the border color.
-  * @default "medium"
-  */
+   * Severity badge; controls the border color.
+   * @default "medium"
+   */
   readonly risk?: ApprovalRisk;
   /**
-  * Name of the tool / action under review.
-  */
+   * Name of the tool / action under review.
+   */
   readonly tool: string;
 };
 /**
-* Three-way approval prompt for tool calls. Resolves via `onDecision`:
-* `y` / Enter → allow-once, `a` → allow-always, `n` / Esc → deny.
-* @returns A bordered `ReactElement` containing the risk banner, params
-* preview, optional body, and the prompt line.
-*/
-declare function ApprovalPrompt({
-  accentColor,
-  autoFocus,
-  children,
-  description,
-  isDisabled,
-  onDecision,
-  params,
-  risk,
-  tool
-}: Props): ReactElement;
+ * Three-way approval prompt for tool calls. Resolves via `onDecision`:
+ * `y` / Enter → allow-once, `a` → allow-always, `n` / Esc → deny.
+ * @returns A bordered `ReactElement` containing the risk banner, params
+ * preview, optional body, and the prompt line.
+ */
+declare function ApprovalPrompt({ accentColor, autoFocus, children, description, isDisabled, onDecision, params, risk, tool }: Props): ReactElement;
 export { ApprovalDecision, ApprovalPrompt, type Props as ApprovalPromptProps, ApprovalRisk, Props, ApprovalPrompt as default };

package/dist/area-chart.d.ts

@@ -5,62 +5,52 @@ import { LineSeries } from "./line-chart.js";
 import '@visulima/tui/canvas';
 type Props = {
   /**
-  * Axis label color.
-  * @default "gray"
-  */
+   * Axis label color.
+   * @default "gray"
+   */
   readonly axisColor?: LiteralUnion<AnsiColors, string>;
   /**
-  * Density of the shaded fill below each line.
-  * - `light` → `░`
-  * - `medium` → `▒` (default)
-  * - `heavy` → `▓`
-  */
+   * Density of the shaded fill below each line.
+   * - `light` → `░`
+   * - `medium` → `▒` (default)
+   * - `heavy` → `▓`
+   */
   readonly fillDensity?: "heavy" | "light" | "medium";
   /**
-  * Chart body height in character rows.
-  * @default 10
-  */
+   * Chart body height in character rows.
+   * @default 10
+   */
   readonly height?: number;
   /**
-  * Upper bound for the y-axis.
-  */
+   * Upper bound for the y-axis.
+   */
   readonly maxY?: number;
   /**
-  * Lower bound for the y-axis.
-  */
+   * Lower bound for the y-axis.
+   */
   readonly minY?: number;
   /**
-  * Fallback palette.
-  */
+   * Fallback palette.
+   */
   readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
   /**
-  * Series to plot.
-  */
+   * Series to plot.
+   */
   readonly series: ReadonlyArray<LineSeries>;
   /**
-  * Render the legend below the plot.
-  * @default true
-  */
+   * Render the legend below the plot.
+   * @default true
+   */
   readonly showLegend?: boolean;
   /**
-  * Chart body width in character columns.
-  * @default 40
-  */
+   * Chart body width in character columns.
+   * @default 40
+   */
   readonly width?: number;
 };
 /**
-* Area chart: line chart with the area between the line and the baseline
-* filled with shaded blocks.
-*/
-declare function AreaChart({
-  axisColor,
-  fillDensity,
-  height,
-  maxY,
-  minY,
-  palette,
-  series,
-  showLegend,
-  width
-}: Props): ReactElement;
+ * Area chart: line chart with the area between the line and the baseline
+ * filled with shaded blocks.
+ */
+declare function AreaChart({ axisColor, fillDensity, height, maxY, minY, palette, series, showLegend, width }: Props): ReactElement;
 export { AreaChart, type Props as AreaChartProps, Props, AreaChart as default };

package/dist/badge.d.ts

@@ -3,20 +3,17 @@ import { ReactNode, ReactElement } from 'react';
 import { LiteralUnion } from 'type-fest';
 type Props = {
   /**
-  * Label content. Strings are automatically uppercased.
-  */
+   * Label content. Strings are automatically uppercased.
+   */
   readonly children: ReactNode;
   /**
-  * Background color for the badge.
-  * @default "magenta"
-  */
+   * Background color for the badge.
+   * @default "magenta"
+   */
   readonly color?: LiteralUnion<AnsiColors, string>;
 };
 /**
-* Renders an uppercase colored label badge, useful for status indicators.
-*/
-declare function Badge({
-  children,
-  color
-}: Props): ReactElement;
+ * Renders an uppercase colored label badge, useful for status indicators.
+ */
+declare function Badge({ children, color }: Props): ReactElement;
 export { Badge, type Props as BadgeProps, Props, Badge as default };

package/dist/bar-chart.d.ts

@@ -3,65 +3,56 @@ import { ReactElement } from 'react';
 import { LiteralUnion } from 'type-fest';
 type BarDatum = {
   /**
-  * Per-bar color override. Falls back to the chart-level palette.
-  */
+   * Per-bar color override. Falls back to the chart-level palette.
+   */
   readonly color?: LiteralUnion<AnsiColors, string>;
   readonly label?: string;
   readonly value: number;
 };
 type Props = {
   /**
-  * Bars to render.
-  */
+   * Bars to render.
+   */
   readonly data: ReadonlyArray<BarDatum>;
   /**
-  * Total height of the plot area in character rows.
-  * @default 10
-  */
+   * Total height of the plot area in character rows.
+   * @default 10
+   */
   readonly height?: number;
   /**
-  * Optional upper bound for the axis. When omitted the chart uses the
-  * largest value in `data`.
-  */
+   * Optional upper bound for the axis. When omitted the chart uses the
+   * largest value in `data`.
+   */
   readonly max?: number;
   /**
-  * Orientation of the bars.
-  * @default "vertical"
-  */
+   * Orientation of the bars.
+   * @default "vertical"
+   */
   readonly orientation?: "horizontal" | "vertical";
   /**
-  * Fallback palette cycled through when a bar does not provide its own color.
-  * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
-  */
+   * Fallback palette cycled through when a bar does not provide its own color.
+   * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
+   */
   readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
   /**
-  * Render labels underneath vertical bars (or to the left of horizontal bars).
-  * @default true
-  */
+   * Render labels underneath vertical bars (or to the left of horizontal bars).
+   * @default true
+   */
   readonly showLabels?: boolean;
   /**
-  * Render numeric values next to each bar.
-  * @default false
-  */
+   * Render numeric values next to each bar.
+   * @default false
+   */
   readonly showValues?: boolean;
   /**
-  * Total width of the plot area in character columns. Defaults to
-  * `data.length * 3` for vertical charts, or `24` for horizontal.
-  */
+   * Total width of the plot area in character columns. Defaults to
+   * `data.length * 3` for vertical charts, or `24` for horizontal.
+   */
   readonly width?: number;
 };
 /**
-* Bar chart rendered on top of `Canvas`. Uses fractional block glyphs for
-* sub-cell precision (▁▂▃▄▅▆▇█ vertical, ▏▎▍▌▋▊▉█ horizontal).
-*/
-declare function BarChart({
-  data,
-  height,
-  max: maxOverride,
-  orientation,
-  palette,
-  showLabels,
-  showValues,
-  width: widthOverride
-}: Props): ReactElement;
+ * Bar chart rendered on top of `Canvas`. Uses fractional block glyphs for
+ * sub-cell precision (▁▂▃▄▅▆▇█ vertical, ▏▎▍▌▋▊▉█ horizontal).
+ */
+declare function BarChart({ data, height, max: maxOverride, orientation, palette, showLabels, showValues, width: widthOverride }: Props): ReactElement;
 export { BarChart, type Props as BarChartProps, BarDatum, Props, BarChart as default };

package/dist/big-text.d.ts

@@ -1,81 +1,71 @@
 import { ReactElement } from 'react';
 /**
-* Available CFonts font faces.
-*/
+ * Available CFonts font faces.
+ */
 type Font = "3d" | "block" | "chrome" | "grid" | "huge" | "pallet" | "shade" | "simple" | "simple3d" | "simpleBlock" | "slick" | "tiny";
 /**
-* Horizontal text alignment.
-*/
+ * Horizontal text alignment.
+ */
 type Align = "center" | "left" | "right";
 /**
-* Terminal background color names supported by CFonts.
-*/
+ * Terminal background color names supported by CFonts.
+ */
 type BackgroundColor = "black" | "blue" | "cyan" | "green" | "magenta" | "red" | "transparent" | "white" | "yellow";
 type Props = {
   /**
-  * Horizontal alignment of the text.
-  * @default "left"
-  */
+   * Horizontal alignment of the text.
+   * @default "left"
+   */
   readonly align?: Align;
   /**
-  * Background color.
-  * @default "transparent"
-  */
+   * Background color.
+   * @default "transparent"
+   */
   readonly backgroundColor?: BackgroundColor;
   /**
-  * Colors to use for the font. Accepts color names, hex values, or `"system"` for terminal default.
-  * @default ["system"]
-  */
+   * Colors to use for the font. Accepts color names, hex values, or `"system"` for terminal default.
+   * @default ["system"]
+   */
   readonly colors?: string[];
   /**
-  * Font face to use.
-  * @default "block"
-  * @see https://github.com/dominikwilkowski/cfonts#supported-fonts
-  */
+   * Font face to use.
+   * @default "block"
+   * @see https://github.com/dominikwilkowski/cfonts#supported-fonts
+   */
   readonly font?: Font;
   /**
-  * Letter spacing.
-  * @default 1
-  */
+   * Letter spacing.
+   * @default 1
+   */
   readonly letterSpacing?: number;
   /**
-  * Line height.
-  * @default 1
-  */
+   * Line height.
+   * @default 1
+   */
   readonly lineHeight?: number;
   /**
-  * Maximum character length per line. `0` means no limit.
-  * @default 0
-  */
+   * Maximum character length per line. `0` means no limit.
+   * @default 0
+   */
   readonly maxLength?: number;
   /**
-  * Whether to add an empty line on top and at the bottom of the output.
-  * @default true
-  */
+   * Whether to add an empty line on top and at the bottom of the output.
+   * @default true
+   */
   readonly space?: boolean;
   /**
-  * The text to render in a large font.
-  */
+   * The text to render in a large font.
+   */
   readonly text: string;
 };
 /**
-* Render large terminal text using CFonts.
-* @example
-* ```tsx
-* import { BigText } from "@visulima/tui/ink";
-*
-* <BigText text="Hello" font="block" />
-* ```
-*/
-declare function BigText({
-  align,
-  backgroundColor,
-  colors,
-  font,
-  letterSpacing,
-  lineHeight,
-  maxLength,
-  space,
-  text
-}: Props): ReactElement;
+ * Render large terminal text using CFonts.
+ * @example
+ * ```tsx
+ * import { BigText } from "@visulima/tui/ink";
+ *
+ * <BigText text="Hello" font="block" />
+ * ```
+ */
+declare function BigText({ align, backgroundColor, colors, font, letterSpacing, lineHeight, maxLength, space, text }: Props): ReactElement;
 export { type Align, type BackgroundColor, BigText, type Align as BigTextAlign, type BackgroundColor as BigTextBackgroundColor, type Font as BigTextFont, type Props as BigTextProps, type Font, type Props, BigText as default };

package/dist/blink-dot.d.ts

@@ -3,34 +3,29 @@ import { ReactElement } from 'react';
 import { LiteralUnion } from 'type-fest';
 type Props = {
   /**
-  * Glyph rendered as the blinking dot.
-  * @default "●" (filled bullet)
-  */
+   * Glyph rendered as the blinking dot.
+   * @default "●" (filled bullet)
+   */
   readonly character?: string;
   /**
-  * Dot color.
-  * @default "red"
-  */
+   * Dot color.
+   * @default "red"
+   */
   readonly color?: LiteralUnion<AnsiColors, string>;
   /**
-  * Milliseconds per blink cycle. The dot is visible for half the cycle.
-  * @default 800
-  */
+   * Milliseconds per blink cycle. The dot is visible for half the cycle.
+   * @default 800
+   */
   readonly interval?: number;
   /**
-  * When false, the dot stays solid (no animation).
-  * @default true
-  */
+   * When false, the dot stays solid (no animation).
+   * @default true
+   */
   readonly isActive?: boolean;
 };
 /**
-* Steady or blinking indicator dot. Pair with `StatusLine` or next to a
-* label to show a "live" / "recording" status.
-*/
-declare function BlinkDot({
-  character,
-  color,
-  interval,
-  isActive
-}: Props): ReactElement;
+ * Steady or blinking indicator dot. Pair with `StatusLine` or next to a
+ * label to show a "live" / "recording" status.
+ */
+declare function BlinkDot({ character, color, interval, isActive }: Props): ReactElement;
 export { BlinkDot, type Props as BlinkDotProps, Props, BlinkDot as default };