@visulima/tui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/packem_shared/StaticRender-C3XWvJdC.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+
+const areDepsEqual = (previousDeps, nextDeps) => {
+  if (previousDeps === nextDeps) {
+    return true;
+  }
+  if (!previousDeps || !nextDeps) {
+    return false;
+  }
+  if (previousDeps.length !== nextDeps.length) {
+    return false;
+  }
+  for (const [index, previousDep] of previousDeps.entries()) {
+    if (!Object.is(previousDep, nextDeps[index])) {
+      return false;
+    }
+  }
+  return true;
+};
+const StaticRender = ({ children, deps, style, width }) => {
+  const ref = useRef(null);
+  const isRenderedRef = useRef(false);
+  const previousDepsRef = useRef(deps);
+  const previousChildrenRef = useRef(children);
+  let invalidated = false;
+  if (deps !== void 0) {
+    if (!areDepsEqual(previousDepsRef.current, deps)) {
+      invalidated = true;
+      previousDepsRef.current = deps;
+    }
+  } else if (children !== previousChildrenRef.current) {
+    invalidated = true;
+    previousChildrenRef.current = children;
+  }
+  if (invalidated) {
+    isRenderedRef.current = false;
+    if (ref.current) {
+      ref.current.cachedRender = void 0;
+    }
+  }
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.internal_onRendered = () => {
+        isRenderedRef.current = true;
+      };
+    }
+  });
+  useEffect(
+    () => () => {
+      const node = ref.current;
+      if (node) {
+        node.cachedRender = void 0;
+        node.internal_onRendered = void 0;
+      }
+    },
+    []
+  );
+  const mergedStyle = useMemo(() => {
+    return {
+      ...style,
+      width
+    };
+  }, [style, width]);
+  return jsx("ink-static-render", { ref, style: mergedStyle, children: isRenderedRef.current ? null : children() });
+};
+
+export { StaticRender as default };

package/dist/packem_shared/StatusLine-DQNUstN9.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const renderSlot = (content, color) => {
+  if (content === void 0) {
+    return void 0;
+  }
+  if (typeof content === "string" || typeof content === "number") {
+    return jsx(Text, { color, children: content });
+  }
+  return content;
+};
+function StatusLine({ backgroundColor, center, color, left, right }) {
+  return jsxs(Box, { backgroundColor, paddingX: 1, width: "100%", children: [
+    jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: renderSlot(left, color) }),
+    center === void 0 ? void 0 : jsx(Box, { flexGrow: 0, flexShrink: 0, justifyContent: "center", children: renderSlot(center, color) }),
+    jsx(Box, { flexGrow: 1, flexShrink: 1, justifyContent: "flex-end", minWidth: 0, children: renderSlot(right, color) })
+  ] });
+}
+
+export { StatusLine as default };

package/dist/packem_shared/{StatusMessage-BtSYxzwb.js → StatusMessage-BYTL6Pl-.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 import { V as VARIANT_CONFIG } from './variant-config-DSZoX5TM.js';
 
 function StatusMessage({ children, variant }) {

package/dist/packem_shared/Stepper-CmUPRK3z.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const STATUS_ICON = {
+  active: "●",
+  completed: "✔",
+  error: "✖",
+  pending: "○"
+};
+const resolveStatus = (step, index, activeIndex) => {
+  if (step.status !== void 0) {
+    return step.status;
+  }
+  if (index < activeIndex) {
+    return "completed";
+  }
+  if (index === activeIndex) {
+    return "active";
+  }
+  return "pending";
+};
+function Stepper({ accentColor = "blue", activeIndex = 0, errorColor = "red", orientation = "horizontal", steps }) {
+  if (orientation === "vertical") {
+    return jsx(Box, { flexDirection: "column", children: steps.map((step, index) => {
+      const status = resolveStatus(step, index, activeIndex);
+      const isLast = index === steps.length - 1;
+      const color = status === "error" ? errorColor : status === "pending" ? void 0 : accentColor;
+      return jsxs(Box, { flexDirection: "column", children: [
+        jsxs(Box, { children: [
+          jsxs(Text, { color, dimColor: status === "pending", children: [
+            STATUS_ICON[status],
+            " "
+          ] }),
+          jsx(Text, { bold: status === "active", color, dimColor: status === "pending", children: step.label })
+        ] }),
+        step.description === void 0 ? void 0 : jsx(Box, { marginLeft: 2, children: jsx(Text, { dimColor: true, children: step.description }) }),
+        isLast ? void 0 : jsx(Box, { marginLeft: 0, children: jsx(Text, { dimColor: true, children: "│" }) })
+      ] }, step.key ?? index);
+    }) });
+  }
+  return jsx(Box, { children: steps.map((step, index) => {
+    const status = resolveStatus(step, index, activeIndex);
+    const color = status === "error" ? errorColor : status === "pending" ? void 0 : accentColor;
+    const isLast = index === steps.length - 1;
+    return jsxs(Fragment, { children: [
+      jsxs(Box, { children: [
+        jsxs(Text, { color, dimColor: status === "pending", children: [
+          STATUS_ICON[status],
+          " "
+        ] }),
+        jsx(Text, { bold: status === "active", color, dimColor: status === "pending", children: step.label })
+      ] }),
+      isLast ? void 0 : jsx(Text, { dimColor: true, children: " ── " })
+    ] }, step.key ?? index);
+  }) });
+}
+
+export { Stepper as default };

package/dist/packem_shared/Stopwatch-zqLQAxXC.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useImperativeHandle } from 'react';
+import useStopwatch from './useStopwatch-C__Zu6hd.js';
+import { f as formatDuration } from './format-time-BGmnDukX.js';
+import Text from './Text-CtUwV89_.js';
+
+const Stopwatch = ({ autoStart, bold, color, format = formatDuration, interval, ref }) => {
+  const sw = useStopwatch({ autoStart, interval });
+  useImperativeHandle(ref, () => {
+    return {
+      lap: sw.lap,
+      reset: sw.reset,
+      start: sw.start,
+      stop: sw.stop,
+      toggle: sw.toggle
+    };
+  }, [sw.lap, sw.reset, sw.start, sw.stop, sw.toggle]);
+  return jsx(Text, { bold, color, children: format(sw.elapsed) });
+};
+
+export { Stopwatch as default };

package/dist/packem_shared/StreamingText-BmuoJtGu.js

@@ -0,0 +1,38 @@
+import { jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import Text from './Text-CtUwV89_.js';
+
+function StreamingText({ color, cursor = "▊", interval = 20, onComplete, showCursorWhenDone = false, text }) {
+  const [visibleLength, setVisibleLength] = useState(0);
+  const onCompleteRef = useRef(onComplete);
+  const hasCompletedRef = useRef(false);
+  onCompleteRef.current = onComplete;
+  useEffect(() => {
+    setVisibleLength(0);
+    hasCompletedRef.current = false;
+  }, [text]);
+  useEffect(() => {
+    if (visibleLength >= text.length) {
+      if (!hasCompletedRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current?.();
+      }
+      return void 0;
+    }
+    const timer = setTimeout(() => {
+      setVisibleLength((previous) => Math.min(text.length, previous + 1));
+    }, interval);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [visibleLength, text, interval]);
+  const done = visibleLength >= text.length;
+  const showCursor = !done || showCursorWhenDone;
+  const visible = text.slice(0, visibleLength);
+  return jsxs(Text, { color, children: [
+    visible,
+    showCursor ? cursor : ""
+  ] });
+}
+
+export { StreamingText as default };

package/dist/packem_shared/Switch-DcPdy8nm.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Switch({
+  accentColor = "green",
+  autoFocus = false,
+  children,
+  defaultValue = false,
+  isDisabled = false,
+  labels = ["off", "on"],
+  onChange,
+  value
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.return || input === " ") {
+          const next = !current;
+          if (value === void 0) {
+            setInternal(next);
+          }
+          onChange?.(next);
+        }
+      },
+      [isFocused, current, value, onChange]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  const off = labels[0];
+  const on = labels[1];
+  const focusColor = isFocused ? accentColor : void 0;
+  return jsxs(Box, { gap: 1, children: [
+    jsxs(Box, { gap: 0, children: [
+      jsxs(Text, { backgroundColor: current ? void 0 : "gray", color: current ? void 0 : "black", dimColor: isDisabled, children: [
+        " ",
+        off,
+        " "
+      ] }),
+      jsxs(Text, { backgroundColor: current ? accentColor : void 0, color: current ? "black" : void 0, dimColor: isDisabled, children: [
+        " ",
+        on,
+        " "
+      ] })
+    ] }),
+    children === void 0 ? void 0 : jsx(Text, { color: focusColor, dimColor: isDisabled, children })
+  ] });
+}
+
+export { Switch as default };

package/dist/packem_shared/{Table-D-rSVlzb.js → Table-Bgxo87Df.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Table } from '@visulima/tabular';
 import { THICK_BORDER, ROUNDED_BORDER, NO_BORDER, MINIMAL_BORDER, MARKDOWN_BORDER, DOUBLE_BORDER, DOTS_BORDER, DEFAULT_BORDER, BLOCK_BORDER, ASCII_BORDER } from '@visulima/tabular/style';
 import { useMemo } from 'react';
-import Text from './Text-DvAUdZcK.js';
+import Text from './Text-CtUwV89_.js';
 
 const BORDER_PRESETS = {
   ascii: ASCII_BORDER,
@@ -16,7 +16,13 @@ const BORDER_PRESETS = {
   rounded: ROUNDED_BORDER,
   thick: THICK_BORDER
 };
-function TableComponent({
+const toColumnConfig = (col) => {
+  if (typeof col === "string") {
+    return { key: col };
+  }
+  return col;
+};
+const TableComponent = ({
   borderStyle = "default",
   columns: columnsProp,
   data,
@@ -27,14 +33,14 @@ function TableComponent({
   showHeader = true,
   skeleton = "",
   wordWrap = false
-}) {
+}) => {
   const tableString = useMemo(() => {
     if (data.length === 0) {
       return "";
     }
     let resolvedColumns;
     if (columnsProp) {
-      resolvedColumns = columnsProp.map((col) => typeof col === "string" ? { key: col } : col);
+      resolvedColumns = columnsProp.map((col) => toColumnConfig(col));
     } else {
       resolvedColumns = Object.keys(data[0]).map((key) => {
         return { key };
@@ -77,6 +83,6 @@ function TableComponent({
     return table.toString();
   }, [borderStyle, columnsProp, data, formatCell, formatHeader, maxWidth, padding, showHeader, skeleton, wordWrap]);
   return jsx(Text, { children: tableString });
-}
+};
 
 export { TableComponent as default };

package/dist/packem_shared/{Tabs-BXpZwLWo.js → Tabs-DubuHdYV.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useMemo, useCallback, Children } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import { useRef, useState, useCallback, useEffect, useMemo, Children } from 'react';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const NUMBER_KEY_PATTERN = /^\d$/u;
 const isTabElement = (child) => child != null && typeof child === "object" && "props" in child && "name" in child.props;
@@ -37,6 +37,7 @@ function Tabs({
   keyMap: keyMapProp,
   onChange,
   showIndex = true,
+  value,
   width
 }) {
   const tabs = collectTabs(children);
@@ -44,16 +45,28 @@ function Tabs({
   const tabsRef = useRef(tabs);
   tabsRef.current = tabs;
   const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
-  const [activeTab, setActiveTab] = useState(() => {
-    if (defaultValue == null || tabCount === 0) {
+  const isControlled = value !== void 0;
+  const [internalTab, setInternalTab] = useState(() => {
+    const initial = value ?? defaultValue;
+    if (initial == null || tabCount === 0) {
       return 0;
     }
-    const foundIndex = tabs.findIndex((tab) => tab.props.name === defaultValue);
+    const foundIndex = tabs.findIndex((tab) => tab.props.name === initial);
     return foundIndex === -1 ? 0 : foundIndex;
   });
+  const activeTab = isControlled ? Math.max(
+    0,
+    tabs.findIndex((tab) => tab.props.name === value)
+  ) : internalTab;
+  const noopSetTab = useCallback(() => {
+  }, []);
+  const setActiveTab = isControlled ? noopSetTab : setInternalTab;
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   useEffect(() => {
+    if (isControlled) {
+      return;
+    }
     const tab = tabsRef.current[activeTab];
     if (tab) {
       onChangeRef.current(tab.props.name, tab);
@@ -63,33 +76,34 @@ function Tabs({
   const nextKeys = useMemo(() => keyMapProp?.next ?? [isColumn ? "downArrow" : "rightArrow"], [keyMapProp?.next, isColumn]);
   const useNumbers = keyMapProp?.useNumbers ?? true;
   const useTab = keyMapProp?.useTab ?? true;
-  const handleTabChange = useCallback((index) => {
-    setActiveTab(index);
-    const tab = tabsRef.current[index];
-    if (tab) {
-      onChangeRef.current(tab.props.name, tab);
-    }
-  }, []);
-  const moveToNext = useCallback(() => {
-    setActiveTab((current) => {
-      const next = current + 1 >= tabCount ? 0 : current + 1;
-      const tab = tabsRef.current[next];
+  const activeTabRef = useRef(activeTab);
+  activeTabRef.current = activeTab;
+  const handleTabChange = useCallback(
+    (index) => {
+      setActiveTab(index);
+      const tab = tabsRef.current[index];
       if (tab) {
         onChangeRef.current(tab.props.name, tab);
       }
-      return next;
-    });
-  }, [tabCount]);
+    },
+    [setActiveTab]
+  );
+  const moveToNext = useCallback(() => {
+    const next = (activeTabRef.current + 1) % tabCount;
+    setActiveTab(next);
+    const tab = tabsRef.current[next];
+    if (tab) {
+      onChangeRef.current(tab.props.name, tab);
+    }
+  }, [tabCount, setActiveTab]);
   const moveToPrevious = useCallback(() => {
-    setActiveTab((current) => {
-      const previous = current - 1 < 0 ? tabCount - 1 : current - 1;
-      const tab = tabsRef.current[previous];
-      if (tab) {
-        onChangeRef.current(tab.props.name, tab);
-      }
-      return previous;
-    });
-  }, [tabCount]);
+    const previous = (activeTabRef.current - 1 + tabCount) % tabCount;
+    setActiveTab(previous);
+    const tab = tabsRef.current[previous];
+    if (tab) {
+      onChangeRef.current(tab.props.name, tab);
+    }
+  }, [tabCount, setActiveTab]);
   useInput(
     useCallback(
       (input, key) => {
@@ -129,14 +143,18 @@ function Tabs({
   return jsx(Box, { flexDirection, width, children: tabs.map((child, index) => {
     const { name } = child.props;
     const textColors = getActiveTabColors(activeTab === index, isFocused !== false, colorsProp);
+    let indexLabel = null;
+    if (showIndex) {
+      indexLabel = jsxs(Text, { color: "grey", children: [
+        index + 1,
+        ".",
+        " "
+      ] });
+    }
     return jsxs(Box, { flexDirection, children: [
       index !== 0 && jsx(Text, { color: "dim", children: separator }),
       jsxs(Box, { children: [
-        showIndex ? jsxs(Text, { color: "grey", children: [
-          index + 1,
-          ".",
-          " "
-        ] }) : null,
+        indexLabel,
         jsx(Text, { backgroundColor: textColors.backgroundColor, color: textColors.color, children: child })
       ] })
     ] }, name);

package/dist/packem_shared/Tag-CCqM7Ee9.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Tag({ children, color = "blue", icon, variant = "subtle" }) {
+  if (variant === "outline") {
+    return jsx(Box, { borderColor: color, borderStyle: "round", paddingX: 1, children: jsxs(Text, { color, children: [
+      icon === void 0 ? void 0 : jsxs(Fragment, { children: [
+        icon,
+        " "
+      ] }),
+      children
+    ] }) });
+  }
+  if (variant === "solid") {
+    return jsxs(Text, { backgroundColor: color, color: "black", children: [
+      " ",
+      icon === void 0 ? void 0 : jsxs(Fragment, { children: [
+        icon,
+        " "
+      ] }),
+      children,
+      " "
+    ] });
+  }
+  return jsxs(Text, { color, children: [
+    icon === void 0 ? void 0 : jsxs(Fragment, { children: [
+      icon,
+      " "
+    ] }),
+    children
+  ] });
+}
+
+export { Tag as default };

package/dist/packem_shared/{Text-DvAUdZcK.js → Text-CtUwV89_.js}

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import colorizeDefault from '@visulima/colorize';
 import { useContext, useCallback } from 'react';
 import { c as colorize } from './colorize-88_Vk8cn.js';
-import { a as accessibilityContext } from './AccessibilityContext-BLelHhNU.js';
-import { b as backgroundContext } from './BackgroundContext-BAUaxfOb.js';
+import { a as accessibilityContext } from './accessibility-context-BLelHhNU.js';
+import { b as backgroundContext } from './background-context-BAUaxfOb.js';
 
 function Text({
   "aria-hidden": ariaHidden = false,

package/dist/packem_shared/{TextInput-C79WEQ5U.js → TextInput-C9r7zT0U.js}

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
+import useInput from './useInput-DKZbqMRc.js';
 import { i as isInsertableInput } from './input-utils-ViAEXa0Z.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const KILL_WORD_PATTERN = /\S+\s*$/;
 const findSuggestion = (value, suggestions) => {

package/dist/packem_shared/{Textarea-Dj06R6Zd.js → Textarea-CGmgt-Nl.js}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import useClipboard from './useClipboard-B_9-adw1.js';
-import useInput from './useInput-Cfp5zB2s.js';
-import usePaste from './usePaste-Ct8J4AGR.js';
+import useClipboard from './useClipboard-MNj6MNR-.js';
+import useInput from './useInput-DKZbqMRc.js';
+import usePaste from './usePaste-png73gvT.js';
 import useTextBuffer from './useTextBuffer-C8fEe9Ly.js';
 import { i as isInsertableInput } from './input-utils-ViAEXa0Z.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const getOrderedSelection = (cursor, anchor) => {
   if (anchor.line < cursor.line || anchor.line === cursor.line && anchor.col < cursor.col) {

package/dist/packem_shared/Timer-D7ZZ0_wz.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { useImperativeHandle } from 'react';
+import useTimer from './useTimer-DnBtbhB5.js';
+import { f as formatDuration } from './format-time-BGmnDukX.js';
+import Text from './Text-CtUwV89_.js';
+
+const Timer = ({ autoStart, bold, color, duration, format = formatDuration, interval, onTimeout, ref }) => {
+  const timer = useTimer({ autoStart, duration, interval, onTimeout });
+  useImperativeHandle(ref, () => {
+    return {
+      reset: timer.reset,
+      start: timer.start,
+      stop: timer.stop,
+      toggle: timer.toggle
+    };
+  }, [timer.reset, timer.start, timer.stop, timer.toggle]);
+  return jsx(Text, { bold, color, children: format(timer.remaining) });
+};
+
+export { Timer as default };

package/dist/packem_shared/Toast-DXSCXFPY.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+import { V as VARIANT_CONFIG } from './variant-config-DSZoX5TM.js';
+
+function Toast({ children, duration = 4e3, onDismiss, title, variant = "info", visible, width }) {
+  const [internalVisible, setInternalVisible] = useState(true);
+  const isVisible = visible ?? internalVisible;
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  useEffect(() => {
+    if (visible !== void 0 || duration <= 0 || !isVisible) {
+      return void 0;
+    }
+    const timer = setTimeout(() => {
+      setInternalVisible(false);
+      onDismissRef.current?.();
+    }, duration);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [duration, visible, isVisible]);
+  if (!isVisible) {
+    return null;
+  }
+  const { color, icon } = VARIANT_CONFIG[variant];
+  return jsxs(Box, { borderColor: color, borderStyle: "round", gap: 1, paddingX: 1, width, children: [
+    jsx(Text, { color, children: icon }),
+    jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [
+      title === void 0 ? void 0 : jsx(Text, { bold: true, children: title }),
+      jsx(Text, { children })
+    ] })
+  ] });
+}
+
+export { Toast as default };

package/dist/packem_shared/Tooltip-SvVjj-2k.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const PLACEMENT_STYLE = {
+  bottom: { flexDirection: "column", orderFirst: false },
+  left: { flexDirection: "row", orderFirst: true },
+  right: { flexDirection: "row", orderFirst: false },
+  top: { flexDirection: "column", orderFirst: true }
+};
+function Tooltip({ children, color = "gray", content, isVisible = true, placement = "right" }) {
+  const { flexDirection, orderFirst } = PLACEMENT_STYLE[placement];
+  const tooltip = isVisible ? jsx(
+    Box,
+    {
+      borderColor: color,
+      borderStyle: "round",
+      flexShrink: 0,
+      marginLeft: placement === "right" ? 1 : 0,
+      marginRight: placement === "left" ? 1 : 0,
+      paddingX: 1,
+      children: typeof content === "string" ? jsx(Text, { color, children: content }) : content
+    }
+  ) : void 0;
+  return jsxs(Box, { alignItems: "center", flexDirection, children: [
+    orderFirst ? tooltip : void 0,
+    jsx(Box, { children }),
+    orderFirst ? void 0 : tooltip
+  ] });
+}
+
+export { Tooltip as default };

package/dist/packem_shared/{Transform-BHxY_dAM.js → Transform-Cfyva2wd.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { a as accessibilityContext } from './AccessibilityContext-BLelHhNU.js';
+import { a as accessibilityContext } from './accessibility-context-BLelHhNU.js';
 
 const TRANSFORM_STYLE = { flexDirection: "row", flexGrow: 0, flexShrink: 1 };
 function Transform({ accessibilityLabel, children, transform }) {