@kud/ink-ui 0.13.1 → 0.14.0

package/dist/index.d.ts

@@ -1,29 +1,30 @@
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 
 type BannerProps = {
     title: string;
     subtitle?: string;
     icon?: string;
 };
-declare const Banner: ({ title, subtitle, icon }: BannerProps) => React.JSX.Element;
+declare const Banner: ({ title, subtitle, icon }: BannerProps) => React__default.JSX.Element;
 
 type BadgeVariant = "success" | "error" | "warning" | "info";
 type BadgeProps = {
     children: string;
     variant?: BadgeVariant;
 };
-declare const Badge: ({ children, variant }: BadgeProps) => React.JSX.Element;
+declare const Badge: ({ children, variant }: BadgeProps) => React__default.JSX.Element;
 
 type HeaderProps = {
     children: string;
     subtitle?: string;
 };
-declare const Header: ({ children, subtitle }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ children, subtitle }: HeaderProps) => React__default.JSX.Element;
 
 type SpinnerProps = {
     label?: string;
 };
-declare const Spinner: ({ label }: SpinnerProps) => React.JSX.Element;
+declare const Spinner: ({ label }: SpinnerProps) => React__default.JSX.Element;
 
 type Column<T extends Record<string, unknown>> = {
     key: keyof T & string;
@@ -34,25 +35,25 @@ type TableProps<T extends Record<string, unknown>> = {
     data: T[];
     columns: Column<T>[];
 };
-declare const Table: <T extends Record<string, unknown>>({ data, columns, }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T extends Record<string, unknown>>({ data, columns, }: TableProps<T>) => React__default.JSX.Element;
 
 type Hint = [key: string, label: string];
 type FooterHintsProps = {
     hints: Hint[];
 };
-declare const FooterHints: ({ hints }: FooterHintsProps) => React.JSX.Element;
+declare const FooterHints: ({ hints }: FooterHintsProps) => React__default.JSX.Element;
 
 type KeyValueProps = {
     label: string;
-    value: React.ReactNode;
+    value: React__default.ReactNode;
     labelWidth?: number;
 };
-declare const KeyValue: ({ label, value, labelWidth }: KeyValueProps) => React.JSX.Element;
+declare const KeyValue: ({ label, value, labelWidth }: KeyValueProps) => React__default.JSX.Element;
 
 type LoadingScreenProps = {
     label: string;
 };
-declare const LoadingScreen: ({ label }: LoadingScreenProps) => React.JSX.Element;
+declare const LoadingScreen: ({ label }: LoadingScreenProps) => React__default.JSX.Element;
 
 type PanelProps = {
     /** Optional title shown in the panel's header row. */
@@ -66,21 +67,21 @@ type PanelProps = {
     flexGrow?: number;
     children: ReactNode;
 };
-declare const Panel: ({ title, color, focused, width, height, flexGrow, children, }: PanelProps) => React.JSX.Element;
+declare const Panel: ({ title, color, focused, width, height, flexGrow, children, }: PanelProps) => React__default.JSX.Element;
 
 type ColumnsProps = {
     /** Horizontal gap between columns (character cells). Defaults to 1. */
     gap?: number;
     children: ReactNode;
 };
-declare const Columns: ({ gap, children }: ColumnsProps) => React.JSX.Element;
+declare const Columns: ({ gap, children }: ColumnsProps) => React__default.JSX.Element;
 
 type SelectableRowProps = {
     active?: boolean;
     marker?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
-declare const SelectableRow: ({ active, marker, children, }: SelectableRowProps) => React.JSX.Element;
+declare const SelectableRow: ({ active, marker, children, }: SelectableRowProps) => React__default.JSX.Element;
 
 type SelectOption<T extends string = string> = {
     label: string;
@@ -94,7 +95,7 @@ type SelectProps<T extends string> = {
     isDisabled?: boolean;
     visibleOptionCount?: number;
 };
-declare const Select: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: SelectProps<T>) => React__default.JSX.Element;
 
 type MultiSelectProps<T extends string> = {
     options: SelectOption<T>[];
@@ -104,7 +105,7 @@ type MultiSelectProps<T extends string> = {
     isDisabled?: boolean;
     visibleOptionCount?: number;
 };
-declare const MultiSelect: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: MultiSelectProps<T>) => React.JSX.Element;
+declare const MultiSelect: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: MultiSelectProps<T>) => React__default.JSX.Element;
 
 type TextInputProps = {
     placeholder?: string;
@@ -113,7 +114,7 @@ type TextInputProps = {
     onSubmit?: (value: string) => void;
     isDisabled?: boolean;
 };
-declare const TextInput: ({ placeholder, defaultValue, onChange, onSubmit, isDisabled, }: TextInputProps) => React.JSX.Element;
+declare const TextInput: ({ placeholder, defaultValue, onChange, onSubmit, isDisabled, }: TextInputProps) => React__default.JSX.Element;
 
 type EmailInputProps = {
     placeholder?: string;
@@ -123,7 +124,7 @@ type EmailInputProps = {
     onSubmit?: (value: string) => void;
     isDisabled?: boolean;
 };
-declare const EmailInput: ({ placeholder, defaultValue, domains, onChange, onSubmit, isDisabled, }: EmailInputProps) => React.JSX.Element;
+declare const EmailInput: ({ placeholder, defaultValue, domains, onChange, onSubmit, isDisabled, }: EmailInputProps) => React__default.JSX.Element;
 
 type PasswordInputProps = {
     placeholder?: string;
@@ -132,7 +133,7 @@ type PasswordInputProps = {
     onSubmit?: (value: string) => void;
     isDisabled?: boolean;
 };
-declare const PasswordInput: ({ placeholder, mask, onChange, onSubmit, isDisabled, }: PasswordInputProps) => React.JSX.Element;
+declare const PasswordInput: ({ placeholder, mask, onChange, onSubmit, isDisabled, }: PasswordInputProps) => React__default.JSX.Element;
 
 type ConfirmInputProps = {
     defaultChoice?: "confirm" | "cancel";
@@ -140,27 +141,27 @@ type ConfirmInputProps = {
     onCancel?: () => void;
     isDisabled?: boolean;
 };
-declare const ConfirmInput: ({ defaultChoice, onConfirm, onCancel, isDisabled, }: ConfirmInputProps) => React.JSX.Element;
+declare const ConfirmInput: ({ defaultChoice, onConfirm, onCancel, isDisabled, }: ConfirmInputProps) => React__default.JSX.Element;
 
 type ItemProps$1 = {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 type UnorderedListProps = {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
-declare const UnorderedList: (({ children }: UnorderedListProps) => React.JSX.Element) & {
-    Item: ({ children }: ItemProps$1) => React.JSX.Element;
+declare const UnorderedList: (({ children }: UnorderedListProps) => React__default.JSX.Element) & {
+    Item: ({ children }: ItemProps$1) => React__default.JSX.Element;
 };
 
 type ItemProps = {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     _index?: number;
 };
 type OrderedListProps = {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
-declare const OrderedList: (({ children }: OrderedListProps) => React.JSX.Element) & {
-    Item: ({ children, _index }: ItemProps) => React.JSX.Element;
+declare const OrderedList: (({ children }: OrderedListProps) => React__default.JSX.Element) & {
+    Item: ({ children, _index }: ItemProps) => React__default.JSX.Element;
 };
 
 type Span = {
@@ -183,7 +184,7 @@ type ScrollViewProps = {
     initialStart?: number;
     isActive?: boolean;
 };
-declare const ScrollView: ({ lines, showIndicator, initialStart, isActive, }: ScrollViewProps) => React.JSX.Element;
+declare const ScrollView: ({ lines, showIndicator, initialStart, isActive, }: ScrollViewProps) => React__default.JSX.Element;
 
 type TabItem<T extends string = string> = {
     value: T;
@@ -194,7 +195,28 @@ type TabsProps<T extends string> = {
     active: T;
     items: TabItem<T>[];
 };
-declare const Tabs: <T extends string>({ active, items }: TabsProps<T>) => React.JSX.Element;
+declare const Tabs: <T extends string>({ active, items }: TabsProps<T>) => React__default.JSX.Element;
+
+type UseTabsOptions<T extends string> = {
+    initial?: T;
+    isActive?: boolean;
+};
+declare const useTabs: <T extends string>(items: TabItem<T>[], { initial, isActive }?: UseTabsOptions<T>) => {
+    active: T | undefined;
+    setActive: React.Dispatch<React.SetStateAction<T | undefined>>;
+};
+
+type UseListCursorOptions = {
+    initial?: number;
+    wrap?: boolean;
+    vimKeys?: boolean;
+    isActive?: boolean;
+};
+declare const useListCursor: (length: number, { initial, wrap, vimKeys, isActive, }?: UseListCursorOptions) => {
+    cursor: number;
+    setCursor: React.Dispatch<React.SetStateAction<number>>;
+    moveCursor: (delta: number) => void;
+};
 
 type SwitchValue = "left" | "right";
 type SwitchProps = {
@@ -203,14 +225,14 @@ type SwitchProps = {
     value: SwitchValue;
     color?: string;
 };
-declare const Switch: ({ left, right, value, color, }: SwitchProps) => React.JSX.Element;
+declare const Switch: ({ left, right, value, color, }: SwitchProps) => React__default.JSX.Element;
 
 type ToggleProps = {
     label: string;
     on: boolean;
     color?: string;
 };
-declare const Toggle: ({ label, on, color }: ToggleProps) => React.JSX.Element;
+declare const Toggle: ({ label, on, color }: ToggleProps) => React__default.JSX.Element;
 
 type ToggleSwitchProps = {
     on: boolean;
@@ -218,7 +240,7 @@ type ToggleSwitchProps = {
     onColor?: string;
     offColor?: string;
 };
-declare const ToggleSwitch: ({ on, label, onColor, offColor, }: ToggleSwitchProps) => React.JSX.Element;
+declare const ToggleSwitch: ({ on, label, onColor, offColor, }: ToggleSwitchProps) => React__default.JSX.Element;
 
 type UpdateBannerProps = {
     name: string;
@@ -229,7 +251,7 @@ type UpdateBannerProps = {
     onDecline: () => void;
     focused?: boolean;
 };
-declare const UpdateBanner: ({ name, current, latest, command, onConfirm, onDecline, focused, }: UpdateBannerProps) => React.JSX.Element;
+declare const UpdateBanner: ({ name, current, latest, command, onConfirm, onDecline, focused, }: UpdateBannerProps) => React__default.JSX.Element;
 
 type ProgressBarProps = {
     value: number;
@@ -237,22 +259,22 @@ type ProgressBarProps = {
     color?: string;
     trackColor?: string;
 };
-declare const ProgressBar: ({ value, width, color, trackColor, }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: ({ value, width, color, trackColor, }: ProgressBarProps) => React__default.JSX.Element;
 
 type StatusVariant = "success" | "error" | "warning" | "info";
 
 type StatusMessageProps = {
     variant?: StatusVariant;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
-declare const StatusMessage: ({ variant, children, }: StatusMessageProps) => React.JSX.Element;
+declare const StatusMessage: ({ variant, children, }: StatusMessageProps) => React__default.JSX.Element;
 
 type AlertProps = {
     variant?: StatusVariant;
     title?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
-declare const Alert: ({ variant, title, children }: AlertProps) => React.JSX.Element;
+declare const Alert: ({ variant, title, children }: AlertProps) => React__default.JSX.Element;
 
 type ToastProps = {
     message: string;
@@ -260,7 +282,7 @@ type ToastProps = {
     duration?: number;
     onDone?: () => void;
 };
-declare const Toast: ({ message, variant, duration, onDone, }: ToastProps) => React.JSX.Element | null;
+declare const Toast: ({ message, variant, duration, onDone, }: ToastProps) => React__default.JSX.Element | null;
 
 type IconMode = "text" | "nerd";
 declare const setIconMode: (mode: IconMode) => void;
@@ -290,4 +312,4 @@ declare const spacing: {
 };
 type Spacing = (typeof spacing)[keyof typeof spacing];
 
-export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, Columns, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, Switch, type SwitchValue, type TabItem, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, Columns, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, Switch, type SwitchValue, type TabItem, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing, useListCursor, useTabs };

package/dist/index.js

@@ -104,7 +104,7 @@ var SelectableRow = ({
   marker = "\u276F",
   children
 }) => /* @__PURE__ */ jsxs(Box, { children: [
-  /* @__PURE__ */ jsx(Text, { color: colors.info, children: active ? `  ${marker} ` : "    " }),
+  /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: colors.info, children: active ? `  ${marker} ` : "    " }) }),
   isTextValue2(children) ? /* @__PURE__ */ jsx(Text, { bold: active, children }) : children
 ] });
 var windowStart = (cursor, total, count) => {
@@ -545,6 +545,45 @@ var Tabs = ({ active, items }) => {
     /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: cell.isActive ? "\u2500".repeat(cell.text.length) : " ".repeat(cell.text.length) }, cell.key)) })
   ] });
 };
+var useTabs = (items, { initial, isActive = true } = {}) => {
+  const [active, setActive] = useState(
+    initial ?? items[0]?.value
+  );
+  useInput(
+    (_input, key) => {
+      if (!key.tab || items.length === 0) return;
+      const current2 = items.findIndex((item) => item.value === active);
+      const next = (current2 + (key.shift ? -1 : 1) + items.length) % items.length;
+      setActive(items[next].value);
+    },
+    { isActive }
+  );
+  return { active, setActive };
+};
+var useListCursor = (length, {
+  initial = 0,
+  wrap = false,
+  vimKeys = true,
+  isActive = true
+} = {}) => {
+  const [cursor, setCursor] = useState(initial);
+  const moveCursor = (delta) => {
+    if (length === 0) return;
+    setCursor((current2) => {
+      const next = current2 + delta;
+      if (wrap) return (next + length) % length;
+      return Math.min(length - 1, Math.max(0, next));
+    });
+  };
+  useInput(
+    (input, key) => {
+      if (key.upArrow || vimKeys && input === "k") moveCursor(-1);
+      if (key.downArrow || vimKeys && input === "j") moveCursor(1);
+    },
+    { isActive }
+  );
+  return { cursor, setCursor, moveCursor };
+};
 var Switch = ({
   left,
   right,
@@ -766,4 +805,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-export { Alert, Badge, Banner, Columns, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, Banner, Columns, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing, useListCursor, useTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",