@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/cjs/InputParts/index.cjs

@@ -32,6 +32,7 @@ __export(InputParts_exports, {
   InputInfo: () => InputInfo,
   InputLabel: () => InputLabel,
   defaultInputGroupStyles: () => defaultInputGroupStyles,
+  getInputFrameTransitionProps: () => getInputFrameTransitionProps,
   inputSizeVariant: () => inputSizeVariant,
   useForwardFocus: () => useForwardFocus
 });
@@ -39,6 +40,7 @@ module.exports = __toCommonJS(InputParts_exports);
 var import_get_font_sized = require("@tamagui/get-font-sized");
 var import_get_token = require("@tamagui/get-token");
 var import_react = require("react");
+var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
 var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.cjs");
@@ -47,6 +49,18 @@ var import_tableCellContext = require("../shared/tableCellContext.cjs");
 var import_fieldLayout = require("../fieldLayout.cjs");
 var import_themedPrimitives = require("../themedPrimitives.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function useNativeFieldA11yProps() {
+  const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
+  if (import_tamagui.isWeb || !fieldA11y) return void 0;
+  return {
+    ...(fieldA11y.label ? {
+      accessibilityLabel: fieldA11y.label
+    } : void 0),
+    ...(fieldA11y.description ? {
+      accessibilityHint: fieldA11y.description
+    } : void 0)
+  };
+}
 const defaultContextValues = {
   size: "$true",
   scaleIcon: 1.2,
@@ -70,6 +84,39 @@ const useForwardFocus = target => {
     focusable: true
   };
 };
+const inputFrameCssTimings = {
+  bouncy: "ease-in 200ms",
+  lazy: "ease-in 600ms",
+  slow: "ease-in 500ms",
+  medium: "ease-in-out 250ms",
+  quick: "ease-in 100ms",
+  tooltip: "ease-in 400ms",
+  snappy: "ease-out 80ms",
+  gentle: "ease-in-out 450ms"
+};
+function getInputFrameTransitionProps(transition) {
+  if (!transition) return void 0;
+  if (!import_tamagui.isWeb) return {
+    transition
+  };
+  const timing = inputFrameCssTimings[transition] ?? inputFrameCssTimings.quick;
+  return {
+    // Prefer explicit CSS over Tamagui's `transition: all` named prop.
+    style: {
+      transition: [`background-color ${timing}`, `border-color ${timing}`, `color ${timing}`, `opacity ${timing}`, `box-shadow ${timing}`, `transform ${timing}`].join(", ")
+    }
+  };
+}
+const inputOutlineRest = {
+  outlineWidth: 0,
+  outlineColor: "transparent",
+  outlineStyle: "solid"
+};
+const inputOutlineFocus = {
+  outlineColor: "$outlineColor",
+  outlineWidth: 2,
+  outlineStyle: "solid"
+};
 const defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -83,16 +130,17 @@ const defaultInputGroupStyles = {
   borderColor: import_colorRamps.formInputColors.border.base,
   backgroundColor: import_colorRamps.formInputColors.background.base,
   minWidth: 0,
-  outlineStyle: "none",
+  ...inputOutlineRest,
+  hoverStyle: {
+    borderColor: import_colorRamps.formInputColors.border.hover
+  },
   focusStyle: {
     borderColor: import_colorRamps.formInputColors.border.focus,
-    backgroundColor: import_colorRamps.formInputColors.background.focus,
-    outlineStyle: "none"
+    ...inputOutlineFocus
   },
   focusVisibleStyle: {
     borderColor: import_colorRamps.formInputColors.border.focus,
-    backgroundColor: import_colorRamps.formInputColors.background.focus,
-    outlineStyle: "none"
+    ...inputOutlineFocus
   }
 };
 const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
@@ -122,37 +170,123 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
+const nativeElevationShadow = {
+  $1: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.12,
+    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
+    shadowRadius: 2,
+    elevation: 2
+  },
+  $2: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4
+  },
+  $4: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 8
+  }
+};
+const elevationKeyAlias = {
+  "20": "$1",
+  "28": "$2",
+  "44": "$4"
+};
+function getBoxElevationProps(token) {
+  if (token == null) return {
+    elevation: void 0
+  };
+  if (import_tamagui.isWeb) return {
+    elevation: token
+  };
+  const key = elevationKeyAlias[String(token)] ?? String(token);
+  return nativeElevationShadow[key] || nativeElevationShadow.$2;
+}
+function wrapNativePressable(onPress, disabled, node) {
+  if (import_tamagui.isWeb || !onPress) return node;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+    onPress,
+    disabled: !!disabled,
+    accessibilityRole: "button",
+    style: disabled ? {
+      opacity: 0.5
+    } : void 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      pointerEvents: "none",
+      collapsable: false,
+      width: "100%",
+      children: node
+    })
+  });
+}
 const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   const {
     children,
+    onPress,
+    disabled,
     ...props
   } = groupProps;
   const [focused, setFocused] = (0, import_react.useState)(false);
   const {
     knobProps,
-    control
+    control,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)();
   const grouped = (0, import_groupContext.useControlGrouped)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const framePressProps = import_tamagui.isWeb ? {
+    onPress,
+    disabled
+  } : {
+    disabled
+  };
+  (0, import_theme.warnPositiveTabIndex)({
+    value: props.tabIndex,
+    component: "Input.Box"
+  });
+  (0, import_theme.warnOutlineNone)(props.focusVisibleStyle, {
+    component: "Input.Box"
+  });
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
       setFocused,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
         ref: forwardedRef,
         borderWidth: 0,
         borderRadius: 0,
         backgroundColor: "transparent",
-        flex: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto",
+        maxWidth: "100%",
+        minWidth: 0,
         elevation: void 0,
         ...props,
+        ...framePressProps,
         overflow: "visible",
         children
-      })
+      }))
     });
   }
   if (grouped) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    return wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
       ref: forwardedRef,
       borderWidth: 0,
       borderRadius: 0,
@@ -160,60 +294,71 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       flex: 1,
       elevation: void 0,
       ...props,
+      ...framePressProps,
       overflow: "visible",
       children
-    });
+    }));
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
       backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
-      elevation: knobProps.elevation,
+      ...getBoxElevationProps(knobProps.elevation),
       ...knobProps.borderRadius,
-      ...(knobProps.transition ? {
-        transition: knobProps.transition
-      } : void 0),
-      ...(control.hoverKnobProps && {
-        hoverStyle: control.hoverKnobProps
-      }),
-      ...(control.pressKnobProps && {
-        pressStyle: control.pressKnobProps
-      }),
-      ...(control.focusKnobProps && {
-        focusStyle: {
-          borderColor: import_colorRamps.formInputColors.border.focus,
-          backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-          outlineStyle: "none",
-          ...control.focusKnobProps
-        }
-      }),
-      ...(control.focusVisibleKnobProps && {
-        focusVisibleStyle: {
-          borderColor: import_colorRamps.formInputColors.border.focus,
-          backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-          outlineStyle: "none",
-          ...control.focusVisibleKnobProps
-        }
+      ...getInputFrameTransitionProps(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
+      hoverStyle: {
+        borderColor: import_colorRamps.formInputColors.border.hover,
+        ...control.hoverKnobProps
+      },
+      pressStyle: {
+        ...control.pressKnobProps
+      },
+      focusStyle: {
+        borderColor: import_colorRamps.formInputColors.border.focus,
+        ...inputOutlineFocus,
+        ...control.focusKnobProps
+      },
+      focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+        borderColor: import_colorRamps.formInputColors.border.focus,
+        ...inputOutlineFocus,
+        ...control.focusVisibleKnobProps
       }),
       ...props,
+      ...framePressProps,
       ...(focused ? {
+        // Focus is forwarded from the inner input, so the ring is applied
+        // as inline props rather than focusStyle.
         borderColor: import_colorRamps.formInputColors.border.focus,
-        backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-        ...control.focusKnobProps
+        ...(0, import_theme.ensureFocusVisibleRing)({
+          ...inputOutlineFocus,
+          ...control.focusKnobProps,
+          ...control.focusVisibleKnobProps
+        })
+      } : {
+        // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
+        // dark) as the computed outline-color while width settles.
+        // Keep outline-transparent rest (border-flicker fix); do not warn.
+        ...inputOutlineRest
+      }),
+      ...(disabled ? {
+        ...disabledState.surfaceKnobProps,
+        hoverStyle: {
+          ...disabledState.surfaceKnobProps
+        }
       } : void 0),
       overflow: "hidden",
       children
-    })
+    }))
   });
 });
 const inputSizeVariant = (val = "$true", extras) => {
   const size = val || "$true";
   const paddingHorizontal = (0, import_get_token.getSpace)(size, {
-    shift: 0,
+    shift: -1,
     bounds: [2]
   });
   const fontStyle = (0, import_get_font_sized.getFontSized)(size, extras);
@@ -263,34 +408,52 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
   } = (0, import_theme.useResolvedKnobs)();
   const theme = (0, import_tamagui.useTheme)();
   const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    flex: 1,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputFrame, {
-      "aria-describedby": fieldDescribedBy,
-      ref,
-      size,
-      color: knobProps.textAccentColor,
-      placeholderTextColor: theme.color7?.val ?? "$color7",
-      ...knobProps.body,
-      type: secureTextEntry ? "password" : props.type,
-      inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
-      autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
-      ...props,
-      onFocus: e => {
-        setFocused(true);
-        onFocusProp?.(e);
-      },
-      onBlur: e => {
-        setFocused(false);
-        onBlurProp?.(e);
-      },
-      onChange: onChangeText || onChangeProp ? e => {
-        const text = e.target?.value ?? e.nativeEvent?.text ?? "";
-        onChangeText?.(text);
-        onChangeProp?.(e);
-      } : void 0
+  const nativeA11yProps = useNativeFieldA11yProps();
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  return (
+    // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
+    // input must be allowed to shrink below the <input>'s intrinsic width
+    // (min-width:auto floors flex items at it); width 100% makes the input
+    // adopt the flexed width instead of its size-attribute default. Explicit
+    // consumer widths (OTP digit boxes) still win via the later spread.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      ...(inTableCell ? {
+        minWidth: 0
+      } : void 0),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputFrame, {
+        "aria-describedby": fieldDescribedBy,
+        ...nativeA11yProps,
+        ref,
+        size,
+        color: knobProps.textAccentColor,
+        placeholderTextColor: theme.placeholderColor?.val ?? "$placeholderColor",
+        ...(inTableCell ? {
+          width: "100%",
+          minWidth: 0
+        } : void 0),
+        ...knobProps.body,
+        type: secureTextEntry ? "password" : props.type,
+        inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
+        autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
+        ...props,
+        onFocus: e => {
+          setFocused(true);
+          onFocusProp?.(e);
+        },
+        onBlur: e => {
+          setFocused(false);
+          onBlurProp?.(e);
+        },
+        onChange: onChangeText || onChangeProp ? e => {
+          const text = e.target?.value ?? e.nativeEvent?.text ?? "";
+          onChangeText?.(text);
+          onChangeProp?.(e);
+        } : void 0
+      })
     })
-  });
+  );
 });
 const InputSection = (0, import_tamagui.styled)(import_tamagui.XGroup.Item, {
   justifyContent: "center",
@@ -386,11 +549,11 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
     bounds: [2]
   });
   const paddingProps = adornment === "leading" ? {
-    paddingLeft: padding,
-    paddingRight: 0
+    paddingInlineStart: padding,
+    paddingInlineEnd: 0
   } : adornment === "trailing" ? {
-    paddingRight: padding,
-    paddingLeft: 0
+    paddingInlineEnd: padding,
+    paddingInlineStart: 0
   } : {
     paddingHorizontal: padding
   };
@@ -435,10 +598,15 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputContainerFrame, {
     ref: forwardedRef,
     size: knobProps.sizeToken,
     ...knobProps.body,
+    ...(inTableCell ? {
+      maxWidth: "100%",
+      minWidth: 0
+    } : void 0),
     ...props
   });
 });
@@ -459,7 +627,7 @@ const InputLabel = InputLabelFrame.styleable((props, ref) => {
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputLabelFrame, {
     ref,
-    ...knobProps.heading,
+    ...knobProps.body,
     color: knobProps.textAccentColor,
     ...props
   });
@@ -509,16 +677,17 @@ function InputFieldMeta({
   displayError
 }) {
   const errorMessage = displayError && typeof displayError === "string" && displayError.length > 0 ? displayError : void 0;
-  if (!helperText && !errorMessage) return null;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [helperText ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
-      children: helperText
-    }) : null, errorMessage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
+  if (errorMessage) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
       color: import_colorRamps.formCommonColors.error,
       role: "alert",
       "aria-live": "polite",
       children: errorMessage
-    }) : null]
+    });
+  }
+  if (!helperText) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
+    children: helperText
   });
 }
 const InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
@@ -550,10 +719,12 @@ function FocusWiredTextArea(props) {
     ...rest
   } = props;
   const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const nativeA11yProps = useNativeFieldA11yProps();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flex: 1,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_themedPrimitives.ThemedTextArea, {
       "aria-describedby": fieldDescribedBy,
+      ...nativeA11yProps,
       ref: innerRef,
       width: "100%",
       onFocus: e => {