@multiplatform.one/forms 7.46.0 → 7.47.0

package/src/fields/Geolocation/index.tsx

@@ -1,4 +1,5 @@
 import {
+  edgeColorAt,
   ensureFocusVisibleRing,
   pressTargetHitSlop,
   sizeTokenStep,
@@ -6,12 +7,13 @@ import {
   useGlyphColor,
   useTouchSurface,
   type KnobProps,
+  Text,
 } from "@multiplatform.one/theme";
 import { MagnifyingGlassIcon, MapPinIcon, NavigationArrowIcon, XIcon } from "@phosphor-icons/react";
 import type { KeyboardEvent, MutableRefObject, ReactNode } from "react";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { ScrollView, Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { ScrollView, Spinner, Text as TamaguiText, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -217,9 +219,9 @@ function CoordinatesPanel({
   return (
     <YStack testID="geolocation-coords-panel" gap="$3" minWidth={260} {...knobProps.panelPadding}>
       <YStack gap="$1">
-        <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+        <TamaguiText fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
           {t("Lat")}
-        </Text>
+        </TamaguiText>
         <InputParts size={knobProps.sizeToken}>
           <InputParts.Box>
             <InputParts.Area
@@ -236,9 +238,9 @@ function CoordinatesPanel({
         </InputParts>
       </YStack>
       <YStack gap="$1">
-        <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+        <TamaguiText fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
           {t("Lng")}
-        </Text>
+        </TamaguiText>
         <InputParts size={knobProps.sizeToken}>
           <InputParts.Box>
             <InputParts.Area
@@ -557,9 +559,14 @@ function GeoMapSurface({
         paddingHorizontal="$2"
         hitSlop={pressTargetHitSlop(COORD_LINE_HEIGHT)}
       >
-        <Text fontFamily="$mono" fontSize={12} lineHeight={22} color={formCommonColors.muted}>
+        <TamaguiText
+          fontFamily="$mono"
+          fontSize={12}
+          lineHeight={22}
+          color={formCommonColors.muted}
+        >
           {hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")}
-        </Text>
+        </TamaguiText>
       </XStack>
     ) : (
       <FloatingPanel
@@ -593,9 +600,14 @@ function GeoMapSurface({
                 }
               : {})}
           >
-            <Text fontFamily="$mono" fontSize={12} lineHeight={22} color={formCommonColors.muted}>
+            <TamaguiText
+              fontFamily="$mono"
+              fontSize={12}
+              lineHeight={22}
+              color={formCommonColors.muted}
+            >
               {hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")}
-            </Text>
+            </TamaguiText>
           </XStack>
         }
       >
@@ -619,7 +631,11 @@ function GeoMapSurface({
         {...knobProps.borderRadius}
         {...knobProps.inputSurface}
         borderRadius={cappedRadius}
-        borderColor={hasError ? formCommonColors.error : formInputColors.border.base}
+        borderColor={
+          hasError
+            ? formCommonColors.error
+            : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)
+        }
         overflow="hidden"
         height={mapHeight}
         position="relative"
@@ -661,9 +677,9 @@ function GeoMapSurface({
             justifyContent="center"
             pointerEvents="none"
           >
-            <Text {...knobProps.body} color={formCommonColors.muted}>
+            <TamaguiText {...knobProps.body} color={formCommonColors.muted}>
               {t("No location set")}
-            </Text>
+            </TamaguiText>
           </YStack>
         ) : null}
       </YStack>
@@ -674,14 +690,14 @@ function GeoMapSurface({
           role="alert"
           {...knobProps.borderRadius}
           {...knobProps.inputSurface}
-          borderColor={formInputColors.border.base}
+          borderColor={edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)}
           padding="$3"
           gap="$2"
           alignItems="center"
         >
-          <Text {...knobProps.body} color={formCommonColors.error} textAlign="center">
+          <TamaguiText {...knobProps.body} color={formCommonColors.error} textAlign="center">
             {locateError}
-          </Text>
+          </TamaguiText>
           <XStack gap="$2">
             <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
               {t("Retry")}
@@ -1084,7 +1100,14 @@ export function Geolocation({
     if (!resultsOpen || shouldUseSheet) return;
     const onDoc = (event: MouseEvent) => {
       const root = searchRootRef.current;
-      if (root && event.target instanceof Node && root.contains(event.target)) return;
+      if (
+        root &&
+        typeof Node !== "undefined" &&
+        event.target instanceof Node &&
+        root.contains(event.target)
+      ) {
+        return;
+      }
       closeSearch(false);
     };
     const onKey = (event: globalThis.KeyboardEvent) => {

package/src/fields/Icon/index.tsx

@@ -1,9 +1,9 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Pressable as RNPressable } from "react-native";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs, Text } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
-import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
+import { Text as TamaguiText, View, XStack, YStack, isWeb, useProps } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
 import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -280,20 +280,14 @@ function IconControl({
   ) : undefined;
   const nativeClear =
     !isWeb && showClear ? (
-      <InputParts.Button
+      <InputParts.Action
         testID="icon-clear-native"
-        aria-label={t("Clear icon")}
-        accessibilityLabel={t("Clear icon")}
+        label={t("Clear icon")}
         disabled={disabled}
-        onPress={(e) => {
-          e.stopPropagation();
-          handleClear();
-        }}
+        onPress={handleClear}
       >
-        <InputParts.Icon>
-          <DrawnIcon name="x" size={16} />
-        </InputParts.Icon>
-      </InputParts.Button>
+        <DrawnIcon name="x" />
+      </InputParts.Action>
     ) : undefined;
 
   return (
@@ -358,7 +352,7 @@ function IconControl({
                   >
                     {/* Outside InputParts.Icon, so the colour is passed here. */}
                     <DrawnIcon name={name} size={16} color={cellInk} />
-                    <Text
+                    <TamaguiText
                       fontFamily="$mono"
                       fontSize={11}
                       // $color10 measures 3.95-4.36:1, under the 4.5:1 AA floor
@@ -367,7 +361,7 @@ function IconControl({
                       numberOfLines={1}
                     >
                       {name}
-                    </Text>
+                    </TamaguiText>
                   </YStack>
                 </View>
               );

package/src/fields/ImageField/index.tsx

@@ -9,7 +9,7 @@
  * the borderRadius fragment, never clampRadiusForControl / containerRadius.
  */
 
-import { transitionProps } from "@multiplatform.one/theme";
+import { edgeColorAt, transitionProps, Text } from "@multiplatform.one/theme";
 import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
@@ -21,7 +21,7 @@ import {
 import type { DragEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Image, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
 import { Button } from "../../Button";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
@@ -166,7 +166,7 @@ function ImageControl({
 
   useEffect(() => {
     setBroken(false);
-    if (!(currentValue instanceof File) || !isWeb) {
+    if (!isWeb || typeof File === "undefined" || !(currentValue instanceof File)) {
       setPreviewUrl(null);
       return;
     }
@@ -178,11 +178,12 @@ function ImageControl({
   const displayUrl =
     typeof currentValue === "string" && currentValue
       ? currentValue
-      : currentValue instanceof File
+      : typeof File !== "undefined" && currentValue instanceof File
         ? previewUrl
         : null;
   const hasValue =
-    currentValue instanceof File || (typeof currentValue === "string" && !!currentValue);
+    (typeof File !== "undefined" && currentValue instanceof File) ||
+    (typeof currentValue === "string" && !!currentValue);
   const hasPreview = !!displayUrl && !broken;
   const minEdge = Math.min(imageWidth, imageHeight);
   const caption = placeholder === undefined ? t("Add image") : placeholder;
@@ -310,7 +311,7 @@ function ImageControl({
       ? errorProp
         ? formCommonColors.error
         : formCommonColors.text
-      : formInputColors.border.base;
+      : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop);
   const altText =
     typeof label === "string" && label ? label : fieldA11y?.label || t("Selected image");
   const emptyName =
@@ -385,14 +386,14 @@ function ImageControl({
           <View alignItems="center" justifyContent="center" gap="$1" padding="$1">
             <ImageSquareIcon size={iconSize} color="var(--color11)" />
             {showCaption ? (
-              <Text
+              <TamaguiText
                 {...knobProps.body}
                 color={formCommonColors.muted}
                 textAlign="center"
                 numberOfLines={2}
               >
                 {hasValue && broken ? t("Image failed to load") : caption}
-              </Text>
+              </TamaguiText>
             ) : hasValue && broken ? (
               <Text color={formCommonColors.muted} textAlign="center" fontSize="$1">
                 {t("Image failed to load")}

package/src/fields/Input/Input.stories.tsx

@@ -4,10 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Input as TamaguiInput, Paragraph, XStack, YStack } from "tamagui";
+import { Input as TamaguiInput, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Input } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Input> = {
   title: "Forms/Input",
@@ -132,6 +133,43 @@ export const Copy: Story = {
   },
 };
 
+/**
+ * LC-149 FIELD-TRAILING-ACTION: a masked field carries its show/hide toggle
+ * inside, as the trailing action. Eye / eye-slash, "Show password" /
+ * "Hide password", 44pt press target.
+ */
+export const Password: Story = {
+  args: {
+    label: "Password",
+    secureTextEntry: true,
+    defaultValue: "correct horse",
+    placeholder: "Create a password",
+  },
+};
+
+/**
+ * LC-149: one trailing slot per field. An action (reveal, copy) owns it, so
+ * an error shows as the red border and the message; the in-field error glyph
+ * appears only when the slot is empty.
+ */
+export const TrailingActions: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Input label="Password" secureTextEntry defaultValue="hunter22" />
+      <Input
+        label="Password with error"
+        secureTextEntry
+        required
+        error="Password must be at least 8 characters"
+        defaultValue="short"
+      />
+      <Input label="Confirm password" secureTextEntry required error="Passwords do not match" />
+      <Input label="API token" readOnly copy value="mpo_live_4f2a9c81e0b3" />
+      <Input label="Name" required error="Enter your name" />
+    </YStack>
+  ),
+};
+
 export const Chromeless: Story = {
   args: {
     label: "Toolbar search",

package/src/fields/Input/index.tsx

@@ -1,6 +1,6 @@
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactElement, ReactNode } from "react";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { writeToClipboard } from "@multiplatform.one/platform";
 import { MIN_PRESS_TARGET, pressTargetHitSlop } from "@multiplatform.one/theme";
 import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
@@ -24,6 +24,7 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import { Input as InputParts, useForwardFocus } from "../../InputParts";
+import { PasswordReveal, usePasswordReveal } from "../../InputParts/PasswordReveal";
 import type { AnyFormApi, LinkResolver } from "../../types";
 import { LinkCell } from "../../utils/LinkCell";
 import { getFormSubmission } from "../../Form/submissionController";
@@ -63,6 +64,11 @@ export interface InputProps {
   onChangeText?: (text: string) => void;
   onBlur?: (...args: any[]) => void;
   secureTextEntry?: boolean;
+  /**
+   * LC-149: a masked field (`secureTextEntry`, here or in `inputProps`)
+   * carries a show/hide toggle in its trailing slot. `false` drops it.
+   */
+  reveal?: boolean;
   placeholder?: string;
   multiline?: boolean;
   maxLength?: number;
@@ -120,7 +126,8 @@ export function Input({
   onChange,
   onChangeText,
   onBlur,
-  secureTextEntry,
+  secureTextEntry: secureTextEntryProp,
+  reveal = true,
   placeholder,
   multiline,
   maxLength,
@@ -148,6 +155,18 @@ export function Input({
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
+  const masked =
+    secureTextEntryProp ??
+    (inputProps as { secureTextEntry?: boolean } | undefined)?.secureTextEntry;
+  const revealable = Boolean(masked && reveal && !copy && !readOnly && !children && !skeleton);
+  const [revealText, setRevealText] = useState(String(value ?? defaultValue ?? ""));
+  const passwordReveal = usePasswordReveal({
+    inputRef,
+    id,
+    text: value !== undefined ? String(value ?? "") : revealText,
+  });
+  const secureTextEntry =
+    masked === undefined ? undefined : Boolean(masked) && !(revealable && passwordReveal.revealed);
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
@@ -269,6 +288,9 @@ export function Input({
     const copyText = String(inputValue ?? "");
     // Empty omits the cap so the field stays one tab stop (LC-49).
     const showCopy = Boolean(copy && copyText);
+    // LC-149: one trailing slot. An action owns it, so the error glyph steps
+    // aside and the red border plus the message carry the error.
+    const trailingAction = showCopy || revealable;
     const activateCopy = () => {
       if (disabled) return;
       void handleCopy(copyText);
@@ -280,7 +302,7 @@ export function Input({
         // LC-40: the Box owns the disabled chrome treatment (read-only renders
         // its own branch below and never dims).
         disabled={disabled}
-        {...(showCopy ? { paddingInlineEnd: 0 } : undefined)}
+        {...(trailingAction ? { paddingInlineEnd: 0 } : undefined)}
         {...chromelessProps}
       >
         {leftIcon && (
@@ -351,37 +373,30 @@ export function Input({
             onChange={onChange}
             onChangeText={(text) => {
               if (disabled) return;
+              if (revealable) setRevealText(text);
               handleChange?.(text);
               onChangeText?.(text);
             }}
           />
         )}
         {showCopy ? (
-          <InputParts.Button
-            glyphRing
+          <InputParts.Action
             size={resolvedSize}
-            type="button"
             disabled={disabled}
             tabIndex={disabled ? -1 : 0}
-            aria-label={COPY_LABEL}
-            accessibilityLabel={COPY_LABEL}
-            hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
-            onPress={disabled ? undefined : activateCopy}
-            onKeyDown={
-              ((e: KeyboardEvent) => {
-                if (disabled) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  activateCopy();
-                }
-              }) as unknown as () => void
-            }
+            label={COPY_LABEL}
+            onPress={activateCopy}
           >
-            <InputParts.Icon aria-hidden>
-              <ClipboardIcon />
-            </InputParts.Icon>
-          </InputParts.Button>
+            <ClipboardIcon />
+          </InputParts.Action>
+        ) : revealable ? (
+          <PasswordReveal
+            revealed={passwordReveal.revealed}
+            onToggle={passwordReveal.toggle}
+            controls={id}
+            disabled={disabled}
+            size={resolvedSize}
+          />
         ) : rightIcon ? (
           <InputParts.Icon
             adornment="trailing"
@@ -392,7 +407,11 @@ export function Input({
         ) : hasError ? (
           // M3 / Polaris / Spectrum: in-field error glyph (color is not the
           // only channel). Omitted when the consumer owns the trailing slot.
-          <InputParts.Icon adornment="trailing" color={formCommonColors.error}>
+          <InputParts.Icon
+            adornment="trailing"
+            color={formCommonColors.error}
+            data-field-error-glyph=""
+          >
             <WarningCircleIcon aria-hidden />
           </InputParts.Icon>
         ) : null}
@@ -453,6 +472,7 @@ Input.Box = InputParts.Box;
 Input.Area = InputParts.Area;
 Input.Section = InputParts.Section;
 Input.Button = InputParts.Button;
+Input.Action = InputParts.Action;
 Input.Info = InputParts.Info;
 Input.Meta = InputParts.Meta;
 Input.Label = InputParts.Label;

package/src/fields/MentionInput/index.tsx

@@ -1,4 +1,4 @@
-import { useTouchSurface } from "@multiplatform.one/theme";
+import { useTouchSurface, Text } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -12,7 +12,7 @@ import {
   type ReactNode,
 } from "react";
 import { useProps, type GetProps, type SizeTokens } from "tamagui";
-import { Avatar, Text, XStack, YStack, isWeb, styled } from "tamagui";
+import { Avatar, Text as TamaguiText, XStack, YStack, isWeb, styled } from "tamagui";
 import { useDismiss, useInteractions } from "@floating-ui/react";
 import {
   ensureFocusVisibleRing,
@@ -187,7 +187,7 @@ const MEDIA_SLOT_FALLBACK = 32;
 
 const SLUG_ID = /^[A-Za-z][\w.-]*$/;
 
-type MentionTextProps = GetProps<typeof Text>;
+type MentionTextProps = GetProps<typeof TamaguiText>;
 
 /** GitHub/Slack: bold the query hit inside the suggestion label. */
 function MentionMatchText({
@@ -197,20 +197,20 @@ function MentionMatchText({
 }: MentionTextProps & { text: string; query: string }) {
   const needle = query.trim();
   if (!needle) {
-    return <Text {...rest}>{text}</Text>;
+    return <TamaguiText {...rest}>{text}</TamaguiText>;
   }
   const idx = text.toLowerCase().indexOf(needle.toLowerCase());
   if (idx < 0) {
-    return <Text {...rest}>{text}</Text>;
+    return <TamaguiText {...rest}>{text}</TamaguiText>;
   }
   return (
-    <Text {...rest}>
+    <TamaguiText {...rest}>
       {text.slice(0, idx)}
-      <Text {...rest} fontWeight="700">
+      <TamaguiText {...rest} fontWeight="700">
         {text.slice(idx, idx + needle.length)}
-      </Text>
+      </TamaguiText>
       {text.slice(idx + needle.length)}
-    </Text>
+    </TamaguiText>
   );
 }
 
@@ -394,6 +394,7 @@ export function MentionInput<
   });
 
   const dismiss = useDismiss(panel.context, {
+    enabled: isWeb,
     outsidePressEvent: "click",
     ancestorScroll: false,
   });
@@ -435,7 +436,7 @@ export function MentionInput<
       | { textarea?: HTMLTextAreaElement; _textarea?: HTMLTextAreaElement }
       | HTMLElement
       | null;
-    if (!current) return null;
+    if (!current || typeof HTMLTextAreaElement === "undefined") return null;
     if (current instanceof HTMLTextAreaElement) return current;
     if ("textarea" in current && current.textarea instanceof HTMLTextAreaElement) {
       return current.textarea;
@@ -443,11 +444,9 @@ export function MentionInput<
     if ("_textarea" in current && current._textarea instanceof HTMLTextAreaElement) {
       return current._textarea;
     }
-    if (current instanceof HTMLElement) {
-      const nested = current.querySelector("textarea");
-      return nested instanceof HTMLTextAreaElement ? nested : null;
-    }
-    return null;
+    if (typeof HTMLElement === "undefined" || !(current instanceof HTMLElement)) return null;
+    const nested = current.querySelector("textarea");
+    return nested instanceof HTMLTextAreaElement ? nested : null;
   }, []);
 
   const handleTextChange = useCallback(
@@ -776,7 +775,7 @@ export function MentionInput<
   });
 
   useLayoutEffect(() => {
-    if (!triggerActive) return;
+    if (!triggerActive || !isWeb) return;
     const rect = getCaretClientRect();
     panel.refs.setReference({ getBoundingClientRect: () => rect });
     panel.update();
@@ -907,13 +906,13 @@ export function MentionInput<
             })
           : triggerActive && (
               <YStack paddingHorizontal="$3" paddingVertical="$2" role="status" aria-live="polite">
-                <Text
+                <TamaguiText
                   fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
                   color={formCommonColors.muted}
                   {...knobProps.body}
                 >
                   {t("No matches")}
-                </Text>
+                </TamaguiText>
               </YStack>
             )}
         <ScrollArrow

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -3,11 +3,12 @@ import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Input } from "../Input";
 import { Form } from "../../Form";
 import { OTPInput } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof OTPInput> = {
   title: "Forms/OTPInput",

package/src/fields/OTPInput/index.tsx

@@ -2,7 +2,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { edgeColorAt, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   type ClipboardEvent,
   type ComponentProps,
@@ -234,7 +234,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
     ? formCommonColors.error
     : value
       ? formControlColors.boundary
-      : formInputColors.border.base;
+      : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop);
   const firstCell = digitIndex === 0;
 
   return (

package/src/fields/PhoneInput/PhoneInput.stories.tsx

@@ -3,10 +3,11 @@ import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { PhoneInput } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof PhoneInput> = {
   title: "Forms/PhoneInput",

package/src/fields/PhoneInput/index.tsx

@@ -1,4 +1,4 @@
-import { useTouchSurface } from "@multiplatform.one/theme";
+import { useTouchSurface, Text } from "@multiplatform.one/theme";
 import { CaretDownIcon, GlobeIcon } from "@phosphor-icons/react";
 import { ensureCompositeFocusRing, useGlyphColor } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -6,7 +6,7 @@ import type { ComponentProps, FocusEventHandler, ReactNode } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { TamaguiElement } from "tamagui";
 import { isWeb, useProps } from "tamagui";
-import { Input, Text, View, XStack } from "tamagui";
+import { Input, Text as TamaguiText, View, XStack } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import type { SimpleFieldApi, Validator } from "../../types";
@@ -271,7 +271,9 @@ export function PhoneInput<
     const host =
       node && typeof node.setSelectionRange === "function"
         ? node
-        : typeof document !== "undefined" && document.activeElement instanceof HTMLInputElement
+        : typeof document !== "undefined" &&
+            typeof HTMLInputElement !== "undefined" &&
+            document.activeElement instanceof HTMLInputElement
           ? document.activeElement
           : null;
     if (host && typeof host.setSelectionRange === "function") {
@@ -284,7 +286,9 @@ export function PhoneInput<
   const handlePhoneChange = (text: string) => {
     if (disabled || readOnly) return;
     const el =
-      typeof document !== "undefined" && document.activeElement instanceof HTMLInputElement
+      typeof document !== "undefined" &&
+      typeof HTMLInputElement !== "undefined" &&
+      document.activeElement instanceof HTMLInputElement
         ? document.activeElement
         : null;
     const caret = el?.selectionStart ?? text.length;
@@ -366,7 +370,7 @@ export function PhoneInput<
                       <GlobeIcon />
                     </InputParts.Icon>
                   )}
-                  <Text
+                  <TamaguiText
                     data-testid="phone-dial"
                     data-text-class="T-VALUE"
                     fontFamily={knobProps.body.fontFamily}
@@ -376,7 +380,7 @@ export function PhoneInput<
                     userSelect="none"
                   >
                     +{dialOf(code)}
-                  </Text>
+                  </TamaguiText>
                   {inTableCell ? null : <CaretDownIcon size={caretSize} color={glyphColor} />}
                 </XStack>
               );