@kud/ink-ui 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -133,6 +133,22 @@ type TabsProps<T extends string> = {
 };
 declare const Tabs: <T extends string>({ active, items }: TabsProps<T>) => React.JSX.Element;
 
+type SwitchValue = "left" | "right";
+type SwitchProps = {
+    left: string;
+    right: string;
+    value: SwitchValue;
+    color?: string;
+};
+declare const Switch: ({ left, right, value, color, }: SwitchProps) => React.JSX.Element;
+
+type ToggleProps = {
+    label: string;
+    on: boolean;
+    color?: string;
+};
+declare const Toggle: ({ label, on, color }: ToggleProps) => React.JSX.Element;
+
 type ProgressBarProps = {
     value: number;
     width?: number;
@@ -162,6 +178,10 @@ type ToastProps = {
 };
 declare const Toast: ({ message, variant, duration, onDone, }: ToastProps) => React.JSX.Element | null;
 
+type IconMode = "text" | "nerd";
+declare const setIconMode: (mode: IconMode) => void;
+declare const getIconMode: () => IconMode;
+
 type NotifyOptions = {
     title?: string;
     subtitle?: string;
@@ -186,4 +206,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, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, type TabItem, Table, Tabs, TextInput, Toast, colors, notify, 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 };

package/dist/index.js

@@ -2,6 +2,7 @@ import { Box, Text, useInput, measureElement } from 'ink';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useLayoutEffect } from 'react';
 import cliSpinners from 'cli-spinners';
+import { glyphs } from '@kud/glyphs';
 import { spawn } from 'child_process';
 
 // src/components/Banner.tsx
@@ -325,6 +326,44 @@ 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 Switch = ({
+  left,
+  right,
+  value,
+  color = colors.accent
+}) => {
+  const leftActive = value === "left";
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        color: leftActive ? color : void 0,
+        bold: leftActive,
+        dimColor: !leftActive,
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { children: " " }),
+    /* @__PURE__ */ jsx(Text, { color: leftActive ? color : colors.muted, children: leftActive ? "\u25CF" : "\u25CB" }),
+    /* @__PURE__ */ jsx(Text, { color: colors.muted, children: "\u2500" }),
+    /* @__PURE__ */ jsx(Text, { color: !leftActive ? color : colors.muted, children: !leftActive ? "\u25CF" : "\u25CB" }),
+    /* @__PURE__ */ jsx(Text, { children: " " }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        color: !leftActive ? color : void 0,
+        bold: !leftActive,
+        dimColor: leftActive,
+        children: right
+      }
+    )
+  ] });
+};
+var Toggle = ({ label, on, color = colors.accent }) => /* @__PURE__ */ jsxs(Text, { color: on ? color : void 0, dimColor: !on, children: [
+  label,
+  " ",
+  on ? "\u25CF" : "\u25CB"
+] });
 var ProgressBar = ({ value, width = 20 }) => {
   const clamped = Math.max(0, Math.min(100, value));
   const filled = Math.round(clamped / 100 * width);
@@ -334,25 +373,48 @@ var ProgressBar = ({ value, width = 20 }) => {
   ] });
 };
 
+// src/icon-mode.ts
+var current = "text";
+var setIconMode = (mode) => {
+  current = mode;
+};
+var getIconMode = () => current;
+
 // src/components/status-variants.ts
-var STATUS_VARIANTS = {
-  success: { icon: "\u2713", color: colors.success },
-  error: { icon: "\u2717", color: colors.error },
-  warning: { icon: "\u26A0", color: colors.warning },
-  info: { icon: "\u2139", color: colors.info }
+var UNICODE = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+var NERD = {
+  success: glyphs.check,
+  error: glyphs.cross,
+  warning: glyphs.warning,
+  info: glyphs.info
+};
+var COLOR = {
+  success: colors.success,
+  error: colors.error,
+  warning: colors.warning,
+  info: colors.info
 };
+var statusVariant = (variant) => ({
+  icon: (getIconMode() === "nerd" ? NERD : UNICODE)[variant],
+  color: COLOR[variant]
+});
 var StatusMessage = ({
   variant = "info",
   children
 }) => {
-  const { icon, color } = STATUS_VARIANTS[variant];
+  const { icon, color } = statusVariant(variant);
   return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
     /* @__PURE__ */ jsx(Text, { color, children: icon }),
     /* @__PURE__ */ jsx(Text, { children })
   ] });
 };
 var Alert = ({ variant = "info", title, children }) => {
-  const { icon, color } = STATUS_VARIANTS[variant];
+  const { icon, color } = statusVariant(variant);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -385,7 +447,7 @@ var Toast = ({
     return () => clearTimeout(timer);
   }, [duration]);
   if (!visible) return null;
-  const { icon, color } = STATUS_VARIANTS[variant];
+  const { icon, color } = statusVariant(variant);
   return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
     /* @__PURE__ */ jsx(Text, { color, children: icon }),
     /* @__PURE__ */ jsx(Text, { children: message })
@@ -411,4 +473,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-export { Alert, Badge, Banner, ConfirmInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Table, Tabs, TextInput, Toast, colors, notify, spacing };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",
@@ -29,6 +29,7 @@
     "react": ">=19"
   },
   "dependencies": {
+    "@kud/glyphs": "0.1.1",
     "cli-spinners": "3.4.0",
     "figures": "6.1.0"
   },