@lotics/ui 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -30,6 +30,7 @@
     "./menu_list_item": "./src/menu_list_item.tsx",
     "./pressable_highlight": "./src/pressable_highlight.tsx",
     "./icon_button": "./src/icon_button.tsx",
+    "./info_popover": "./src/info_popover.tsx",
     "./badge": "./src/badge.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",

package/src/dom_portal.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, ReactPortal } from "react";
+
+/**
+ * Native stand-in for `react-dom`'s `createPortal`.
+ *
+ * `Portal` only calls `createPortal` inside its web (`isWeb`) branch, so on
+ * React Native this is never invoked. The file exists purely so the shared
+ * `portal.tsx` can `import { createPortal }` statically without pulling
+ * `react-dom` — which has no native build — into the Metro native bundle.
+ *
+ * Web targets resolve `dom_portal.web.ts` instead (Metro's `.web` extension
+ * resolution; Vite's `resolve.extensions`).
+ */
+export function createPortal(
+  _children: ReactNode,
+  _container: Element | DocumentFragment,
+  _key?: string | null,
+): ReactPortal | null {
+  return null;
+}

package/src/dom_portal.web.ts

@@ -0,0 +1,8 @@
+/**
+ * Web variant: the real `react-dom` portal. Isolated into its own module so
+ * the native bundle (which resolves `dom_portal.ts`) never references
+ * `react-dom`. Imported statically by `portal.tsx` — no `require`, so it
+ * works under pure-ESM bundlers (Vite, used by custom-code apps) as well as
+ * Metro.
+ */
+export { createPortal } from "react-dom";

package/src/icon_button.tsx

@@ -13,6 +13,8 @@ export interface IconButtonProps {
   iconColor?: string;
   tooltip?: string;
   tooltipSide?: TooltipSide;
+  /** Accessible name for the button. Falls back to `tooltip` when omitted. */
+  accessibilityLabel?: string;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
@@ -28,6 +30,7 @@ export function IconButton(props: IconButtonProps) {
     color = "none",
     tooltip,
     tooltipSide,
+    accessibilityLabel,
     disabled,
     style,
   } = props;
@@ -45,6 +48,8 @@ export function IconButton(props: IconButtonProps) {
       testID={testID}
       tooltip={tooltip}
       tooltipSide={tooltipSide}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? tooltip}
       style={[styles.button, styles[color], disabled && styles.disabled, style]}
       onPress={handlePress}
       disabled={disabled}

package/src/info_popover.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet } from "react-native";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import type { PopoverSide, PopoverAlign } from "./popover";
+import { IconButton } from "./icon_button";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+export interface InfoPopoverProps {
+  /** Explanatory text shown when the popover opens. */
+  text: string;
+  /** Accessible name for the trigger button. */
+  accessibilityLabel?: string;
+  /** Popover placement relative to the trigger. */
+  side?: PopoverSide;
+  /** Popover alignment along the trigger edge. */
+  align?: PopoverAlign;
+}
+
+/**
+ * A "?" icon button that opens a popover explaining something — a metric, a
+ * field, a setting. The middle ground between Tooltip (a short hover label)
+ * and composing Popover directly (rich, interactive content): a labeled,
+ * keyboard-accessible help affordance for a sentence or two of text.
+ */
+export function InfoPopover(props: InfoPopoverProps) {
+  const { text, accessibilityLabel = "More information", side = "bottom", align = "end" } = props;
+  return (
+    <Popover side={side} align={align}>
+      <PopoverTrigger>
+        <IconButton
+          icon="message-circle-question-mark"
+          iconColor={colors.zinc[500]}
+          accessibilityLabel={accessibilityLabel}
+        />
+      </PopoverTrigger>
+      <PopoverContent style={styles.content} disableBodyScroll>
+        <Text size="sm" color="muted">
+          {text}
+        </Text>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    width: 280,
+  },
+});

package/src/portal.tsx

@@ -11,6 +11,7 @@ import {
   ReactNode,
 } from "react";
 import { Platform, View, StyleSheet } from "react-native";
+import { createPortal } from "./dom_portal";
 
 /**
  * Cross-platform portal system inspired by Base UI and @gorhom/portal.
@@ -137,8 +138,6 @@ export function Portal({ children }: { children: ReactNode }) {
       return null;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const { createPortal } = require("react-dom");
     return createPortal(children, target);
   }