@kud/ink-ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -94,6 +94,25 @@ type TextInputProps = {
 };
 declare const TextInput: ({ placeholder, defaultValue, onChange, onSubmit, isDisabled, }: TextInputProps) => React.JSX.Element;
 
+type EmailInputProps = {
+    placeholder?: string;
+    defaultValue?: string;
+    domains?: string[];
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const EmailInput: ({ placeholder, defaultValue, domains, onChange, onSubmit, isDisabled, }: EmailInputProps) => React.JSX.Element;
+
+type PasswordInputProps = {
+    placeholder?: string;
+    mask?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const PasswordInput: ({ placeholder, mask, onChange, onSubmit, isDisabled, }: PasswordInputProps) => React.JSX.Element;
+
 type ConfirmInputProps = {
     defaultChoice?: "confirm" | "cancel";
     onConfirm?: () => void;
@@ -102,6 +121,27 @@ type ConfirmInputProps = {
 };
 declare const ConfirmInput: ({ defaultChoice, onConfirm, onCancel, isDisabled, }: ConfirmInputProps) => React.JSX.Element;
 
+type ItemProps$1 = {
+    children: React.ReactNode;
+};
+type UnorderedListProps = {
+    children: React.ReactNode;
+};
+declare const UnorderedList: (({ children }: UnorderedListProps) => React.JSX.Element) & {
+    Item: ({ children }: ItemProps$1) => React.JSX.Element;
+};
+
+type ItemProps = {
+    children: React.ReactNode;
+    _index?: number;
+};
+type OrderedListProps = {
+    children: React.ReactNode;
+};
+declare const OrderedList: (({ children }: OrderedListProps) => React.JSX.Element) & {
+    Item: ({ children, _index }: ItemProps) => React.JSX.Element;
+};
+
 type Span = {
     text: string;
     color?: string;
@@ -119,8 +159,9 @@ type StyledLine = {
 type ScrollViewProps = {
     lines: StyledLine[];
     showIndicator?: boolean;
+    initialStart?: number;
 };
-declare const ScrollView: ({ lines, showIndicator, }: ScrollViewProps) => React.JSX.Element;
+declare const ScrollView: ({ lines, showIndicator, initialStart, }: ScrollViewProps) => React.JSX.Element;
 
 type TabItem<T extends string = string> = {
     value: T;
@@ -206,4 +247,4 @@ declare const spacing: {
 };
 type Spacing = (typeof spacing)[keyof typeof spacing];
 
-export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, ConfirmInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, 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, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, 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, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Box, Text, useInput, measureElement } from 'ink';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React8, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import cliSpinners from 'cli-spinners';
 import { glyphs } from '@kud/glyphs';
 import { spawn } from 'child_process';
@@ -223,6 +223,148 @@ var TextInput = ({
     after
   ] });
 };
+var defaultDomains = [
+  "gmail.com",
+  "outlook.com",
+  "hotmail.com",
+  "yahoo.com",
+  "icloud.com",
+  "proton.me"
+];
+var EmailInput = ({
+  placeholder = "",
+  defaultValue = "",
+  domains = defaultDomains,
+  onChange,
+  onSubmit,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [cursor, setCursor] = useState(defaultValue.length);
+  const at = value.indexOf("@");
+  const domainFragment = at === -1 ? "" : value.slice(at + 1);
+  const match = at !== -1 && domainFragment.length > 0 ? domains.find(
+    (d) => d.startsWith(domainFragment) && d !== domainFragment
+  ) : void 0;
+  const suggestion = match ? match.slice(domainFragment.length) : "";
+  const showSuggestion = suggestion.length > 0 && cursor === value.length;
+  const update = (nextValue, nextCursor) => {
+    setValue(nextValue);
+    setCursor(nextCursor);
+    onChange?.(nextValue);
+  };
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
+      if (key.tab && showSuggestion) {
+        update(value + suggestion, value.length + suggestion.length);
+        return;
+      }
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(value.length, c + 1));
+        return;
+      }
+      if (key.backspace || key.delete) {
+        if (cursor === 0) return;
+        update(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+        return;
+      }
+      if (input && !key.ctrl && !key.meta && !key.tab) {
+        update(
+          value.slice(0, cursor) + input + value.slice(cursor),
+          cursor + input.length
+        );
+      }
+    },
+    { isActive: !isDisabled }
+  );
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " }),
+      placeholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: placeholder }) : null
+    ] });
+  }
+  if (showSuggestion) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      value,
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: suggestion.slice(0, 1) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: suggestion.slice(1) })
+    ] });
+  }
+  const before = value.slice(0, cursor);
+  const atChar = value.slice(cursor, cursor + 1) || " ";
+  const after = value.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    before,
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: atChar }),
+    after
+  ] });
+};
+var PasswordInput = ({
+  placeholder = "",
+  mask = "*",
+  onChange,
+  onSubmit,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const update = (nextValue, nextCursor) => {
+    setValue(nextValue);
+    setCursor(nextCursor);
+    onChange?.(nextValue);
+  };
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(value.length, c + 1));
+        return;
+      }
+      if (key.backspace || key.delete) {
+        if (cursor === 0) return;
+        update(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+        return;
+      }
+      if (input && !key.ctrl && !key.meta && !key.tab) {
+        update(
+          value.slice(0, cursor) + input + value.slice(cursor),
+          cursor + input.length
+        );
+      }
+    },
+    { isActive: !isDisabled }
+  );
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " }),
+      placeholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: placeholder }) : null
+    ] });
+  }
+  const masked = mask.repeat(value.length);
+  const before = masked.slice(0, cursor);
+  const at = masked.slice(cursor, cursor + 1) || " ";
+  const after = masked.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    before,
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: at }),
+    after
+  ] });
+};
 var ConfirmInput = ({
   defaultChoice = "confirm",
   onConfirm,
@@ -249,13 +391,58 @@ var ConfirmInput = ({
   const hint = defaultChoice === "confirm" ? "(Y/n)" : "(y/N)";
   return /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint });
 };
+var markers = ["\u25CF", "\u25CB", "\u25AA", "\u25AB"];
+var DepthContext = createContext(0);
+var UnorderedListItem = ({ children }) => {
+  const depth = useContext(DepthContext);
+  const marker = markers[Math.max(0, depth - 1) % markers.length];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      marker,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", children })
+  ] });
+};
+var UnorderedListRoot = ({ children }) => {
+  const depth = useContext(DepthContext);
+  return /* @__PURE__ */ jsx(DepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", children }) });
+};
+var UnorderedList = Object.assign(UnorderedListRoot, {
+  Item: UnorderedListItem
+});
+var OrderedListItem = ({ children, _index = 1 }) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+  /* @__PURE__ */ jsxs(Text, { children: [
+    _index,
+    ". "
+  ] }),
+  /* @__PURE__ */ jsx(Box, { flexDirection: "column", children })
+] });
+var OrderedListRoot = ({ children }) => {
+  let n = 0;
+  const numbered = React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child) && child.type === OrderedListItem) {
+      n += 1;
+      return React8.cloneElement(child, {
+        _index: n
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: numbered });
+};
+var OrderedList = Object.assign(OrderedListRoot, {
+  Item: OrderedListItem
+});
 var ScrollView = ({
   lines,
-  showIndicator = true
+  showIndicator = true,
+  initialStart = 0
 }) => {
   const ref = useRef(null);
   const [height, setHeight] = useState(1);
-  const [start, setStart] = useState(0);
+  const [start, setStart] = useState(initialStart);
+  useEffect(() => setStart(initialStart), [initialStart]);
   useLayoutEffect(() => {
     if (!ref.current) return;
     const { height: h } = measureElement(ref.current);
@@ -473,4 +660,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-export { Alert, Badge, Banner, ConfirmInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, Banner, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, PasswordInput, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };

package/package.json

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