@multiplatform.one/forms 7.45.1 → 7.47.0

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>
               );

package/src/fields/Progress/Progress.stories.tsx

@@ -3,10 +3,11 @@ 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 { useState } from "react";
-import { Paragraph, Progress as TamaguiProgress, XStack, YStack } from "tamagui";
+import { Progress as TamaguiProgress, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Progress } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Progress> = {
   title: "Forms/Progress",

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -3,8 +3,9 @@ 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 { useState } from "react";
-import { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
-import { Preset } from "@multiplatform.one/theme";
+import { RadioGroup as TamaguiRadioGroup, XStack, YStack } from "tamagui";
+import { Label } from "../../Label";
+import { Preset, Text, Paragraph } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { RadioGroup } from "./index";

package/src/fields/RadioGroup/index.tsx

@@ -654,6 +654,7 @@ export function RadioGroup({
       if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "ArrowLeft" && key !== "ArrowRight")
         return;
       setTimeout(() => {
+        if (typeof document === "undefined") return;
         const active = document.activeElement as HTMLElement | null;
         if (!active?.id || !active.id.startsWith(`${id}-`)) return;
         if (active.getAttribute("role") !== "radio") return;

package/src/fields/Rating/Rating.stories.tsx

@@ -4,10 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { StarIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Rating } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Rating> = {
   title: "Forms/Rating",

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useRef, useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { SearchInput, type SearchInputHandle } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof SearchInput> = {
   title: "Forms/SearchInput",

package/src/fields/SearchInput/index.tsx

@@ -7,12 +7,8 @@ import { useTouchSurface } from "@multiplatform.one/theme";
  * native field never rings. Magnifier is not a tab stop. Clear ✕ is the
  * second focusable and rings its own glyph (chip-dismiss, LC-16).
  *
- * Clear is a View sized from the size-recipe square (same geometry as
- * Input.Button). It was hand-rolled because TButton swallows className, so
- * the chip-dismiss ring classes could not ride Input.Button. `glyphRing`
- * now exists (InputParts/index.tsx, MPO-52) and renders this exact pair, so
- * this block can collapse onto `<Input.Button glyphRing>` — in SearchInput's
- * own lane, not this one.
+ * Clear is Input.Action, the field's trailing action (LC-149): the
+ * size-recipe square, chip-dismiss glyph ring, 44pt press target.
  */
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
@@ -24,7 +20,7 @@ import {
 import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
-import { View, isWeb } from "tamagui";
+import { isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -364,46 +360,13 @@ function SearchInputImpl(
           onChangeText={(next: string) => writeText(next, fieldChange)}
         />
         {showClear ? (
-          <View
-            group={"searchClear" as unknown as undefined}
-            role="button"
-            tabIndex={0}
-            aria-label={t("Clear search")}
-            className={isWeb ? "mp-chip-dismiss" : undefined}
-            data-end-cap={visualHeight}
-            width={visualHeight}
-            height={visualHeight}
-            alignItems="center"
-            justifyContent="center"
-            cursor="pointer"
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={{ outlineWidth: 0 }}
-            flexShrink={0}
-            hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
+          <InputParts.Action
+            size={resolvedSize}
+            label={t("Clear search")}
             onPress={() => clearText(fieldChange)}
-            onKeyDown={
-              ((e: KeyboardEvent) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  clearText(fieldChange);
-                }
-              }) as unknown as () => void
-            }
           >
-            <View
-              className={isWeb ? "mp-chip-dismiss-ring" : undefined}
-              alignItems="center"
-              justifyContent="center"
-              hoverStyle={{ backgroundColor: "$color4" }}
-              {...{ "$group-searchClear-press": { backgroundColor: "$color5" } }}
-            >
-              <InputParts.Icon aria-hidden color={formCommonColors.muted}>
-                <XIcon size={resolvedIconSize} />
-              </InputParts.Icon>
-            </View>
-          </View>
+            <XIcon />
+          </InputParts.Action>
         ) : null}
       </InputParts.Box>
     );

package/src/fields/Select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import { transitionProps } from "@multiplatform.one/theme";
+import { transitionProps, Paragraph } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Paragraph, Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagui";
+import { Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { useViewportGtSm } from "../../FloatingPanel";
 import { Form } from "../../Form";

package/src/fields/Select/index.tsx

@@ -21,6 +21,8 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   transitionProps,
+  Text as HouseText,
+  type TextProps as HouseTextProps,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 // `react-native` aliases to react-native-web on the web, and RNW 0.21 exports
@@ -162,18 +164,22 @@ const SelectRow = styled(View, {
   } as const,
 });
 
-const GroupHeader = styled(Text, {
-  name: "SelectGroupHeader",
-  paddingHorizontal: "$3",
-  paddingVertical: "$2",
-  paddingTop: "$3",
-  fontWeight: "600",
-  fontSize: "$2",
-  opacity: 0.6,
-  numberOfLines: 1,
-  userSelect: "none",
-  cursor: "default",
-});
+function GroupHeader(props: HouseTextProps) {
+  return (
+    <HouseText
+      paddingHorizontal="$3"
+      paddingVertical="$2"
+      paddingTop="$3"
+      fontWeight="600"
+      fontSize="$2"
+      opacity={0.6}
+      numberOfLines={1}
+      userSelect="none"
+      cursor="default"
+      {...props}
+    />
+  );
+}
 
 // ── Helper to group options ───────────────────────────────────
 

package/src/fields/Signature/Signature.stories.tsx

@@ -4,10 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { EraserIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Signature } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Signature> = {
   title: "Forms/Signature",

package/src/fields/Signature/index.tsx

@@ -2,6 +2,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   FIELD_FOCUS_STYLE,
+  edgeColorAt,
   ensureKeyboardModalityTracking,
   wasKeyboardFocus,
   transitionProps,
@@ -522,7 +523,11 @@ function SignatureCanvasImpl({
       borderRadius={cappedRadius}
       borderWidth={knobProps.borderRadius.borderWidth}
       elevation={knobProps.elevation}
-      borderColor={error ? formCommonColors.error : formInputColors.border.base}
+      borderColor={
+        error
+          ? formCommonColors.error
+          : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)
+      }
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
       cursor={cursor}

package/src/fields/Slider/Slider.stories.tsx

@@ -3,10 +3,11 @@ 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 { useState } from "react";
-import { Paragraph, Slider as TamaguiSlider, Text, XStack, YStack } from "tamagui";
+import { Slider as TamaguiSlider, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Slider } from "./index";
+import { Paragraph, Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Slider> = {
   title: "Forms/Slider",